Thumb

When to use it

The Thumb component is used to create rectangular images, often used in events. It supports different shapes and sizes, including large and square versions.

Variants

• Large: Use the .c-thumb--large modifier for double height.
• Square: Use the .c-thumb--square modifier for square versions.
• Round: Use the .c-thumb--round modifier for round versions.

What it looks like

Code examples

Default

<img class="c-thumb" alt="" src="../temp/thumb1.jpg" />
<img class="c-thumb c-thumb--large" alt="" src="../temp/thumb1.jpg" />

Round

<img class="c-thumb c-thumb--round" alt="" src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--round c-thumb--large" alt="" src="../temp/thumb2.jpg" />

Square

<img class="c-thumb c-thumb--square" alt="" src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--square c-thumb--large" alt="" src="../temp/thumb2.jpg" />

Accessibility notes

Use empty alt-text (alt="") if the image is not considered content (i.e. it is only there for decoration) or if a descriptive alt-text would duplicate information already present in e.g. a heading nearby.