2.5.1 #Components.card.compact Card - Compact

Toggle example guides Toggle HTML markup

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 
  1. <div class="sb-thumbnail-container">
  2.    <div class="sb-card-wrap sb-flex sb-flex-wrap">
  3.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  4.        <div class="sb-card__header">
  5.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  6.        </div>
  7.        <div class="sb-card__body">
  8.          <h4 class="sb-thumbnail__title">Label</h4>
  9.        </div>
  10.      </div>
  11.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  12.        <div class="sb-card__header">
  13.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  14.        </div>
  15.        <div class="sb-card__body">
  16.          <h4 class="sb-thumbnail__title">Label</h4>
  17.        </div>
  18.      </div>
  19.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  20.        <div class="sb-card__header">
  21.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  22.        </div>
  23.        <div class="sb-card__body">
  24.          <h4 class="sb-thumbnail__title">Label</h4>
  25.        </div>
  26.      </div>
  27.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  28.        <div class="sb-card__header">
  29.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  30.        </div>
  31.        <div class="sb-card__body">
  32.          <h4 class="sb-thumbnail__title">Label</h4>
  33.        </div>
  34.      </div>
  35.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  36.        <div class="sb-card__header">
  37.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  38.        </div>
  39.        <div class="sb-card__body">
  40.          <h4 class="sb-thumbnail__title">Label</h4>
  41.        </div>
  42.      </div>
  43.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  44.        <div class="sb-card__header">
  45.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  46.        </div>
  47.        <div class="sb-card__body">
  48.          <h4 class="sb-thumbnail__title">Label</h4>
  49.          <p class="sb-thumbnail__description">Coming soon</p>
  50.        </div>
  51.      </div>
  52.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  53.        <div class="sb-card__header">
  54.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  55.        </div>
  56.        <div class="sb-card__body">
  57.          <h4 class="sb-thumbnail__title">A long label over two lines</h4>
  58.        </div>
  59.      </div>
  60.      <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
  61.        <div class="sb-card__header">
  62.          <span class="sb-thumbnail__image" aria-role="presentation"></span>
  63.        </div>
  64.        <div class="sb-card__body">
  65.          <h4 class="sb-thumbnail__title">A long label over two lines</h4>
  66.          <p class="sb-thumbnail__description">Coming soon</p>
  67.        </div>
  68.      </div>
  69.    </div>
  70. </div>
Source: components/_card.scss, line 99