2.5.2 #Components.card.radio Card - compact with radio button selection
Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+
Markup
<div class="sb-thumbnail-container">
<div class="sb-card-wrap sb-flex sb-flex-wrap" role="radiogroup">
<input type="radio" name="radio-chart-type" id="mood-chart" class="sb-thumbnail__input" value="mood" />
<label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="mood-chart">
<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>
</label>
<input type="radio" name="radio-chart-type" id="nps-chart" class="sb-thumbnail__input" value="nps" />
<label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="nps-chart">
<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>
</label>
<input type="radio" name="radio-chart-type" id="opentext-chart" class="sb-thumbnail__input" value="opentext" />
<label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="opentext-chart">
<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>
</label>
<input type="radio" name="radio-chart-type" id="presentation-chart" class="sb-thumbnail__input" value="presentation"/>
<label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="presentation-chart">
<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>
</label>
<input type="radio" name="radio-chart-type" id="presentation-chart" class="sb-thumbnail__input" disabled/>
<label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="presentation-chart">
<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">Coming soon</h4>
<p class="sb-thumbnail__description">Disabled card</p>
</div>
</label>
</div>
</div>
Source: components/_card.scss, line 275