☰
Trongate CSS Docs

Size Classes

Trongate CSS provides utility classes for adjusting sizes. These classes scale elements relative to their base size using em units.

Available Size Classes

There are four size modifier classes available:

  1. .xl
  2. .lg
  3. .sm
  4. .xs

The code below shows the effect that these classes have upon text.

Extra Large Text (.xl)

Large Text (.lg)

Default Text Size (no class)

Small Text (.sm)

Extra Small Text (.xs)

Using Size Classes with Buttons

Size classes can be applied to buttons to create clear visual hierarchies in your interfaces:

For more on this, check out our documentation on Form Buttons.

Practical Applications

Size classes can effectively establish content hierarchy. Here's an example showing different size classes working together in card element:

Product Features

Premium Package

Main description of the product goes here.

  • Feature One
  • Feature Two

Terms and conditions apply. See details below.

*Prices may vary by region

Size Class Specifications

The size classes use the following scale:

  • .xl - Sets size to 1.5em (150% of base size)
  • .lg - Sets size to 1.3em (130% of base size)
  • .sm - Sets size to 0.85em (85% of base size)
  • .xs - Sets size to 0.7em (70% of base size)

Size classes can be combined with other utility classes like margin utilities (mt-1, mb-1, etc.) for more precise control over element presentation.