Paragraphs
Side Image Card
An image-plus-text card: the image sits beside the text (40 % width, left or right), and everything stacks neatly on mobile. Use it for programme introductions, methodology sections — anywhere an image accompanies a block of text.
Live example
Image left (default)
The Side Image Card places an image next to a block of text — the image takes 40 % of the width, the text fills the rest. On mobile devices, image and text stack automatically.
The text may contain several paragraphs. Important: all paragraphs go inside one shared text wrapper.
Image right
Adding the class side-image-card-right moves the image to the right side — useful for alternating layouts.
<div class="side-image-card side-image-card-no-zoom">
<div class="side-image-card-body">
<div class="side-image-card-image"><img src="/images/Portfolio/Emlyon-BCO-Content.jpg" alt="Example image"></div>
<div class="side-image-card-text">
<h2 class="side-image-card-title">Image left (default)</h2>
<p>The Side Image Card places an image next to a block of text — the image takes 40 % of the width, the text fills the rest. On mobile devices, image and text stack automatically.</p>
<p>The text may contain several paragraphs. Important: all paragraphs go inside <em>one</em> shared text wrapper.</p>
</div>
</div>
</div>
<div class="side-image-card side-image-card-right side-image-card-no-zoom">
<div class="side-image-card-body">
<div class="side-image-card-image"><img src="/images/Portfolio/Emlyon-BCO-Purpose.jpg" alt="Example image"></div>
<div class="side-image-card-text">
<h2 class="side-image-card-title">Image right</h2>
<p>Adding the class <code>side-image-card-right</code> moves the image to the right side — useful for alternating layouts.</p>
</div>
</div>
</div>