import { Heading } from '@uhg-abyss/mobile';

children

offset

color

textAlign

<Heading>Heading</Heading>

Set Global Heading Font

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, $heading, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSerif' is set as the heading font and will now be applied to all Heading components.

import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

Offset

If you want to have heading levels relative to the current level, you can provide an offset prop. These are equivalent to using a heading element in HTML. A Heading with an offset of 1 would be the equivalent of an <h1>. Headings 1-4 have a default color of $core.color.brand.100 and Headings 5 & 6 have a default color of $core.color.neutral.100.

You can use offset={1|2|3|4|5|6}.

Level

Headings 5 and 6 have an optional property called level that allows you to use a lighter version of the text. The default is level 1, the heavier version. The level two prop makes the heading lighter.

Color

Use the color property to set the color of the text. The default is set to $core.color.brand.100.

Text Align

Use the textAlign prop to change the alignment of the text. Options include left, center and right. The default is set to left.

Heading Props

Prop Name	Type	Default	Description
animated	boolean	false	Flag to enable component animation
children	string	-	The text to be input into the heading component
color	string	Headings 1-4: "#002677", Headings 5-6: "#000000"	Set the color of the heading text
fontFamily	string	-	Set the font family of the heading
level	1 | 2	1	Set the level of the heading. Used for offset 5 and 6 headings
offset	1 | 2 | 3 | 4 | 5 | 6	1	The offset hierarchy of heading. 1 is <h1>, and so on
textAlign	"left" | "center" | "right"	left	Specifies text alignment of the heading text

Heading Classes

Class Name	Description
abyss-heading-root	Heading root element

Search tokens

Heading Tokens

Token Name	Value
heading.color.text.default	#002677
heading.color.text.five	#000000
heading.color.text.six	#000000