Heading
Styled heading tags for emphasising text
The heading component provides all the six levels of section headings, heading colors and text sizes. By default we provide the same size for the different levels, so you will need to take care of it (check the sizes story).
h1
h2
h3
h4
h5
h6
Defines the HTML heading node it will use e.g (<h1>, <h2>, etc..) Note: This is for semantics usage and does not define the size of the heading
Font size for mobile and above
Change the [size] and/or [sizeTablet] from desktop and above
Change the [size], [sizeTablet] and [sizeDesktop] from desktop-large and above
Change the [size], [sizeTablet] and [sizeDesktop] and [sizeDesktopLarge] from desktop-xlarge and above
Change the [size], [sizeTablet], [sizeDesktop] and [sizeDesktopXLarge] from desktop-xxlarge and above
Change the [size] from tablet and above
Truncate text node and adds ellipsis where word is cutoff Note: This will truncate mid-word if needed to keep things in a single line since headings are not expected to contain paragraphs.
Font weight for mobile and above
Change the [weight] and/or [weightTablet] from desktop and above
Change the [weight], [weightTablet] and [weightDesktop] from desktop-large and above
Change the [weight], [weightTablet] and [weightDesktop] and [weightDesktopLarge] from desktop-xlarge and above
Change the [weight], [weightTablet], [weightDesktop] and [weightDesktopXLarge] from desktop-xxlarge and above
Change the [weight] from tablet and above