Menu
Overview
General
ButtonBadgePillsAvatarBrand lockupLayout
ContainerGrid & RowSurface & text utilitiesApp shellPage headerData Display
CardTableChartsCalendarStatsBulletsLeadersLogo wallCollapse & DisclosureTimelineValue chainDescriptionsFeedback
AlertProgressModalSlide-overSkeletonEmpty stateForms
Field & InputDropdownLead form & CTA rowDate pickerFilter barNavigation
NavSide navigationTop navigationApp switcherUser menuStepperTabsBreadcrumbPaginationTemplates
Sign-in pageSigned-out pageSettings layoutTheming
Browser tabProduct themesData Display
Leaders
Clickable people cards with round avatar, name, and role.
.leaders · .leader
<div class="leaders" style="max-width:520px">
<button class="leader">
<span class="avatar">RK</span>
<span><b>Ricardos Khoury</b><span>President & CEO · Founder</span></span>
</button>
<button class="leader">
<span class="avatar">TH</span>
<span><b>Thorsten Hellwig</b><span>Chief Operating Officer</span></span>
</button>
<button class="leader">
<span class="avatar">JG</span>
<span><b>Jim Geovedi</b><span>Chief Technology Officer</span></span>
</button>
</div>
Usage
- Each card is a real
<button>that opens a bio dialog, so it uses the standard clickable lift. - Round photo on white with a thin ring where a headshot exists; monogram avatar is the fallback.