Tickster Styleguide

Appearance

v2.40.3

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 ​

  • Medium: Use the .c-thumb--medium modifier for slightly larger dimension.
  • Large: Use the .c-thumb--large modifier for double dimensions.
  • 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 ​

html
<img class="c-thumb" alt="" src="../temp/thumb1.jpg" />
<img class="c-thumb c-thumb--medium" alt="" src="../temp/thumb1.jpg" />
<img class="c-thumb c-thumb--large" alt="" src="../temp/thumb1.jpg" />
html
<img class="c-thumb c-thumb--round" alt="" src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--round c-thumb--medium" alt="" src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--round c-thumb--large" alt="" src="../temp/thumb2.jpg" />
html
<img class="c-thumb c-thumb--square" alt="" src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--square c-thumb--medium" 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.