Element Sizes

Each text element has its own set of sizes, and the sets differ. This page shows every size of every element side by side, so you can see which classes exist before you use one. A class an element does not have does nothing, and the text stays at its default size.

#

Size Grid

Each row is one element and each column is one size name, from smallest to largest. Add the size class next to the element class, as in value value--large.

The same size name is a different size on each element: value--xlarge is much larger than title--xlarge.

Element xxsmall xsmall small base large xlarge xxlarge xxxlarge mega giga tera peta
Title Not available Not available
Aa title--small
Aa title--base
Aa title--large
Aa title--xlarge
Aa title--xxlarge
Not available Not available Not available Not available Not available
Value
Aa value--xxsmall
Aa value--xsmall
Aa value--small
Aa value--base
Aa value--large
Aa value--xlarge
Aa value--xxlarge
Aa value--xxxlarge
Aa value--mega
Aa value--giga
Aa value--tera
Aa value--peta
Label Not available Not available
Aa label--small
Aa label--base
Aa label--large
Aa label--xlarge
Aa label--xxlarge
Not available Not available Not available Not available Not available
Description Not available Not available Not available
Aa description--base
Aa description--large
Aa description--xlarge
Aa description--xxlarge
Not available Not available Not available Not available Not available
Rich Text Not available Not available
Aa content--small
Aa content--base
Aa content--large
Aa content--xlarge
Aa content--xxlarge
Aa content--xxxlarge
Not available Not available Not available Not available
Text Size Not available Not available
Aa text--small
Aa text--base
Aa text--large
Aa text--xlarge
Aa text--xxlarge
Aa text--xxxlarge
Aa text--mega
Aa text--giga
Aa text--tera
Aa text--peta

Every size class also takes the lg:, portrait:, and lg:portrait: prefixes, for example lg:portrait:value--xlarge. See Responsive .