We use them when representing categories in Groups and Professions, for example, in the People and Companies modules.
Basic structure
<div class="profile-categories">
<div class="profile-categories__header">
<span>Level 1 header</span><span>Level 2 header</span><span>Level 3 header</span>
</div>
<div class="profile-categories__row">
<div><span>Level 1</span></div>
<div><span>Level 2</span></div>
<div><span>Level 3</span></div>
</div>
</div>
Examples
Example of groups
2019
Guest
Film delegation
<div class="profile-categories">
<div class="profile-categories__header">
<span>Edition</span><span>Group</span><span>Subgroup</span>
</div>
<div class="profile-categories__row">
<div><span data-gtm="people-profile-widgets-groups-edition">2019</span></div>
<div><span class="searchable" data-gtm="people-profile-widgets-groups-group" data-searchable-prefix="prefix" data-searchable-string="value"><span>Partnership</span></span></div>
<div><span class="searchable" data-gtm="people-profile-widgets-groups-subgroup" data-searchable-prefix="prefix" data-searchable-string="value"><span>Client</span></span></div>
</div>
<div class="profile-categories__row">
<div><span data-gtm="people-profile-widgets-groups-edition">2019</span></div>
<div><span class="searchable" data-gtm="people-profile-widgets-groups-group" data-searchable-prefix="prefix" data-searchable-string="value"><span>Guest</span></span></div>
<div><span class="searchable" data-gtm="people-profile-widgets-groups-subgroup" data-searchable-prefix="prefix" data-searchable-string="value"><span>Film delegation</span></span></div>
</div>
</div>
Example of professions
<div class="profile-categories">
<div class="profile-categories__header">
<span>Industry</span><span>Sector</span>
</div>
<div class="profile-categories__row">
<div><span class="searchable" data-gtm="companies-profile-widgets-professions-industry" data-searchable-prefix="prefix" data-searchable-string="value"><span>Culture</span></span></div>
<div><span class="searchable" data-gtm="companies-profile-widgets-professions-sector" data-searchable-prefix="prefix" data-searchable-string="value"><span>Film</span></span></div>
</div>
<div class="profile-categories__row">
<div><span class="searchable" data-gtm="companies-profile-widgets-professions-industry" data-searchable-prefix="prefix" data-searchable-string="value"><span>Education</span></span></div>
<div><span class="searchable" data-gtm="companies-profile-widgets-professions-sector" data-searchable-prefix="prefix" data-searchable-string="value"><span>University</span></span></div>
</div>
</div>
