Examples
Default styling

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid.cards--feature-layout
Feature Layout

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid
Grid of four cards left aligned (default)

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid-centre
Grid of four cards centre align

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--three-grid
Grid of three cards left aligned

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--three-grid-centre
Grid of three cards centre align

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
Markup: components/cards/cards.twig
<section class="cards {{modifier_class}}">
	<h2 class="cards__title">Cards title</h2>
	<div class="cards__wrapper">
		{% for i in 0..8 %}
		<div class="card bg--light-grey">
			<div class="card__image">
				<img src="kss-assets/images/1-1-img.jpg" alt="card image">
			</div>
			<div class="card__content-wrapper ">
				<div class="card__content">
					<h3>Follow in Dermont's footsteps</h3>
					<p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
					<a class="card__link link link--inline-redlink link--inline-red" href="#">Get your Dancing Kit</a>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</section>
Source: _sr18-styleguide.scss, line 118