Professional Profile
The professional profile gives the name, title and a description of an individual. A vcard syntax has been used where appropriate. By default the image is displayed to the left (photo-left). The image provided needs to be a 1:1 ratio.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
{{ attach_library('h4h_theme/professional-profile') }}
{% set align = modifier_class ? modifier_class : 'photo-left' %}
{% set read_more = description_full ? ' read-more' : null %}
{% set extra_class = align ~ read_more %}
<div class="professional-profile vcard {{ extra_class }}">
{% if photo %}
<div class="professional-profile__aside">
<div class="professional-profile__photo photo">{{ photo }}</div>
</div>
{% endif %}
<div class="professional-profile__content">
<div class="professional-profile__name fn">{{ fn }}</div>
<div class="professional-profile__title title">{{ title }}</div>
<div id="professional-profile__desc-{{ id }}">
{{ description }}
{% if read_more %}
<button id="button-expand" data-target="#professional-profile__desc-{{ id }}" class="professional__btn btn btn--secondary" data-toggle-class="expanded" aria-label="Read more about {{ fn }}">
{{ "Read more"|t }}
</button>
<div class="professional-profile__desc--full">
{{ description_full }}
<button id="button-collapse" data-target="#professional-profile__desc-{{ id }}" class="professional__btn btn btn--secondary" data-toggle-class="expanded" aria-label="Read less about {{ fn }}">
{{ "Read less"|t}}
</button>
</div>
{% endif %}
</div>
</div>
</div>