website/_src/_includes/board.html

<div class="board grid grid--full grid-small--half grid--gutters">

    {% assign board = site.data.board  %}

    {% for member in board %}

        {% assign slug = (member.name | downcase | replace: ' ', '-')  %}

        <div class="grid__col">
            <div class="boardmember">
                <div class="boardmember__info">
                    <img class="boardmember__avatar" src="/assets/img/board/{{ slug }}.jpg">

                    <div class="boardmember__meta">
                        <h1 class="boardmember__name">
                            {% if member.prefix %}{{ member.prefix }} {% endif %}
                            {{ member.name }}
                        </h1>
                        <p class="boardmember__position">{{ member.position }}</p>

                        {% if member.social %}
                        <p class="boardmember__social">
                            {% for item in member.social %}
                                <a href="{{ item.link }}" title="{{ item.name }}">
                                    <svg class="icon" aria-labelledby="title">
                                        <title>{{ item.name }}</title>
                                        <use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
                                    </svg>
                                </a>
                            {% endfor %}
                        </p>
                        {% endif %}
                    </div>
                </div>

                <div class="boardmember__bio">{{ member.bio | markdownify }}</div>
            </div>
        </div>

    {% endfor %}
</div>