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).
Mobile first responsive heading
Use [sizeTablet] and [sizeDesktop] to override the default [size] input.
Inputs
headingType : HeadingType
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
size : TextSize
Font size for mobile and above
color ?: HeadingColor = HeadingColor.FOREGROUND
inline ?: boolean = false
sizeDesktop ?: TextSize
Change the [size] and/or [sizeTablet] from desktop and above
sizeDesktopLarge ?: TextSize
Change the [size], [sizeTablet] and [sizeDesktop] from desktop-large and above
sizeDesktopXLarge ?: TextSize
Change the [size], [sizeTablet] and [sizeDesktop] and [sizeDesktopLarge] from desktop-xlarge and above
sizeDesktopXXLarge ?: TextSize
Change the [size], [sizeTablet], [sizeDesktop] and [sizeDesktopXLarge] from desktop-xxlarge and above
sizeTablet ?: TextSize
Change the [size] from tablet and above
textAlign ?: TextAlign
textAlignDesktopSmall ?: TextAlign
textAlignTablet ?: TextAlign
textTransform ?: TextTransform
truncate ?: boolean = false
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.
weight ?: HeadingWeight = HeadingWeight.BOLD
Font weight for mobile and above
weightDesktop ?: HeadingWeight
Change the [weight] and/or [weightTablet] from desktop and above
weightDesktopLarge ?: HeadingWeight
Change the [weight], [weightTablet] and [weightDesktop] from desktop-large and above
weightDesktopXLarge ?: HeadingWeight
Change the [weight], [weightTablet] and [weightDesktop] and [weightDesktopLarge] from desktop-xlarge and above
weightDesktopXXLarge ?: HeadingWeight
Change the [weight], [weightTablet], [weightDesktop] and [weightDesktopXLarge] from desktop-xxlarge and above
weightTablet ?: HeadingWeight
Change the [weight] from tablet and above
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.