2.5.1 #Components.card.compact Card - Compact
Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+
Default styling
Label
Label
Label
Label
Label
Label
Coming soon
A long label over two lines
A long label over two lines
Coming soon
.sb-card--compact
compact card with the fixed width and height
Label
Label
Label
Label
Label
Label
Coming soon
A long label over two lines
A long label over two lines
Coming soon
Markup
<div class="sb-thumbnail-container">
<div class="sb-card-wrap sb-flex sb-flex-wrap">
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">Label</h4>
<p class="sb-thumbnail__description">Coming soon</p>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">A long label over two lines</h4>
</div>
</div>
<div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
<div class="sb-card__header">
<span class="sb-thumbnail__image" aria-role="presentation"></span>
</div>
<div class="sb-card__body">
<h4 class="sb-thumbnail__title">A long label over two lines</h4>
<p class="sb-thumbnail__description">Coming soon</p>
</div>
</div>
</div>
</div>
Source: components/_card.scss, line 99