Card Block

Toggle example guides Toggle HTML markup

Standard Card Block

When no card background colour is selected the card content will have no left and right padding. When a background colour is selected the card content will have padding all around (see cards grid below).

Example

Follow in Dermont's footsteps

If Dermot's hip-swivelling heroics have inspired you, why not do your bit for Red Nose Day and put on your own dance event?

Get your Dancing Kit

Markup: components/card-block/card.twig
<div class="card">
	{{ title_suffix.contextual_links }}
	{# {% if field_cr_card_image['#items'].value %} #}
	<div class="card__image">
		<img src="{{ field_cr_card_image }}" alt="">
	</div>
	{# {% endif %} #}
	<div class="card__content-wrapper">
		<div class="card__content">
			{{ field_cr_card_body }}
		</div>
	</div>
</div>
Source: _sr18-styleguide.scss, line 107