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: ' ', '-' | replace: 'ü', 'ue') %}

    <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>