Typography

View on GitHub

Text components

  • Heading: used for headings. A h2 element by default.
  • Text: used for single line text. A span element by default.
  • Paragraph: used for multiline text. A p element by default.
  • Link: used for links. A a element by default.
  • Strong: used to make text strong. A strong element by default.
  • Small: used for inline small text. A small element by default.
  • Pre: used for preformatted content. A pre element by default.
  • Code: used for inline code. A code element by default.

List components

  • OrderedList: used for headings. A ol element.
  • UnorderedList: used for headings. A ul element.
  • ListItem: used for headings. A li element.

Font families

Evergreen uses three font family stacks, ui, display and mono. Text components will set the font family accordingly to their use case. There is not need for you to override this on a component level.

Heading Styles

Heading 100

Font family: ui
Font size: 11px
Font weight: 400
Line height: 16px
Letter spacing: 0.6px
color: #66788A
Default margin top: 16px

Heading 200

Font family: ui
Font size: 12px
Font weight: 600
Line height: 16px
Letter spacing:
color: #66788A
Default margin top: 16px

Heading 300

Font family: ui
Font size: 12px
Font weight: 600
Line height: 16px
Letter spacing: 0
color: #234361
Default margin top: 16px

Heading 400

Font family: ui
Font size: 14px
Font weight: 600
Line height: 20px
Letter spacing: -0.05px
color: #234361
Default margin top: 16px

Heading 500

Font family: ui
Font size: 16px
Font weight: 500
Line height: 20px
Letter spacing: -0.05px
color: #234361
Default margin top: 24px

Heading 600

Font family: display
Font size: 20px
Font weight: 500
Line height: 24px
Letter spacing: -0.07px
color: #234361
Default margin top: 28px

Heading 700

Font family: display
Font size: 24px
Font weight: 500
Line height: 28px
Letter spacing: -0.07px
color: #234361
Default margin top: 40px

Heading 800

Font family: display
Font size: 29px
Font weight: 500
Line height: 32px
Letter spacing: -0.2px
color: #234361
Default margin top: 40px

Heading 900

Font family: display
Font size: 35px
Font weight: 500
Line height: 40px
Letter spacing: -0.2px
color: #234361
Default margin top: 52px

Text Styles

Text 300

Font family: ui
Font size: 12px
Font weight: 400
Line height: 16px
Letter spacing: 0
Default margin top: 12px

Text 400

Font family: ui
Font size: 14px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Default margin top: 12px

Text 500

Font family: ui
Font size: 16px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Default margin top: 16px

Text 600

Font family: display
Font size: 20px
Font weight: 400
Line height: 24px
Letter spacing: -0.07px
Default margin top: 28px

Paragraph Styles

Paragraph 300. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font family: ui
Font size: 12px
Font weight: 400
Line height: 16px
Letter spacing: 0
Default margin top: 12px

Paragraph 400. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font family: ui
Font size: 14px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Default margin top: 12px

Paragraph 500. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font family: ui
Font size: 16px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Default margin top: 16px

Paragraph 600. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font family: display
Font size: 20px
Font weight: 400
Line height: 24px
Letter spacing: -0.07px
Default margin top: 28px

Heading component

The Heading component is used for all headings.

The size options are: 100, 200, 300, 400, 500 (default), 600, 700, 800, 900.

100: The quick brown fox jumps over the lazy dog

200: The quick brown fox jumps over the lazy dog

300: The quick brown fox jumps over the lazy dog

400: The quick brown fox jumps over the lazy dog

500: The quick brown fox jumps over the lazy dog

600: The quick brown fox jumps over the lazy dog

700: The quick brown fox jumps over the lazy dog

800: The quick brown fox jumps over the lazy dog

900: The quick brown fox jumps over the lazy dog

<Pane>
  <Heading size={100} marginTop="default">100: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={200} marginTop="default">200: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={300} marginTop="default">300: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={400} marginTop="default">400: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={500} marginTop="default">500: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={600} marginTop="default">600: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={700} marginTop="default">700: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={800} marginTop="default">800: The quick brown fox jumps over the lazy dog</Heading>
  <Heading size={900} marginTop="default">900: The quick brown fox jumps over the lazy dog</Heading>
</Pane>
code Hide code

Changing the semantic element

The Heading component will always render a h2 until you specify otherwise with the is property. It’s important to realize that the style of a heading is independent from the semantic underlying element.

Heading h3

<Heading is="h3">Heading h3</Heading>
code Hide code

Heading Props

This component composes ui-box

sizeenum = 500
The size of the heading.
marginTopunion
Pass `default` to use the default margin top for that size.
themeobjectrequired
Theme provided by ThemeProvider.

Text component

The Text component is used for single line text. The component renders a span element by default. If you need a multiline paragraph use the Paragraph component.

The size options are: 300, 400 (default), 500

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
<div>
  <div>
    <Text size={300}>The quick brown fox jumps over the lazy dog</Text>
  </div>
  <div>
    <Text size={400}>The quick brown fox jumps over the lazy dog</Text>
  </div>
  <div>
    <Text size={500}>The quick brown fox jumps over the lazy dog</Text>
  </div>
</div>
code Hide code

Set a muted color on a Text component

The quick brown fox jumps over the lazy dog
<Text color="muted">The quick brown fox jumps over the lazy dog</Text>
code Hide code

Paragraph component

The Paragraph component is used for multiline text. This renders a p element by default.

The size options are: 300, 400 (default), 500

Size 300. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Size 400. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Size 500. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>
  <Paragraph size={300} marginTop="default">
    Size 300. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Paragraph>
  <Paragraph size={400} marginTop="default">
    Size 400. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Paragraph>
  <Paragraph marginTop="default">
    Size 500. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Paragraph>
</div>
code Hide code

Set a muted color on a paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<Paragraph color="muted">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Paragraph>
code Hide code

Paragraph Props

This component composes ui-box

sizeenum = 400
Size of the text style. Can be: 300, 400, 500.
fontFamilystring = 'ui'
Font family. Can be: `ui`, `display` or `mono` or a custom font family.
themeobjectrequired
Theme provided by ThemeProvider.
color = 'default'

Link component

The Link component is used for anchor links. This component renders a a element by default.

The size options are: 300, 400 (default), 500

<div>
  <Link href="#" marginRight={12}>Default</Link>
  <Link href="#" marginRight={12} color="green">Green</Link>
  <Link href="#" marginRight={12} color="blue">Blue</Link>
  <Link href="#" marginRight={12} color="neutral">Neutral</Link>
</div>
code Hide code

Link Props

This component composes Text

relstring
This attribute names a relationship of the linked document to the current document. Common use case is: rel="noopener noreferrer".
hrefstring
Specifies the URL of the linked resource. A URL might be absolute or relative.
targetstring
Target atrribute, common use case is target="_blank."
colorstring = 'default'
The color (and styling) of the Link. Can be default, blue, green or neutral.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the link. Only use if you know what you are doing.

Strong component

The Strong component renders strong text. This component renders a strong element by default. Make sure to set the size property if you are using this within a other text component such as a Paragraph.

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
<div>
  <div>
    <Strong size={300}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={400}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={500}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
</div>
code Hide code

Strong Props

This component composes Text

Small component

The Small component works only inside other text components.

The small component can only be used in a other text component

<Paragraph>
  The <Small>small</Small> component can only be used in a other text component
</Paragraph>
code Hide code

Small Props

Code component

The Code component is based on the Text component but renders a code element by default.

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
<div>
  <div>
    <Code size={300}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={400}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={500}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={300} appearance="minimal">The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={400} appearance="minimal">The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={500} appearance="minimal">The quick brown fox jumps over the lazy dog</Code>
  </div>
</div>
code Hide code

Code Props

This component composes Text

appearanceenum = 'default'
The appearance of the code.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the button. Only use if you know what you are doing.

Pre component

The Pre component renders a chunk of preformatted text. This component renders a pre element by default.

Preformatted text.
<Pre>
  Preformatted text.
</Pre>
code Hide code

Pre Props

This component composes Text

UnorderedList component

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
<UnorderedList>
  <ListItem>Lorem ipsum dolor sit amet</ListItem>
  <ListItem>Consectetur adipiscing elit</ListItem>
  <ListItem>Integer molestie lorem at massa</ListItem>
  <ListItem>Facilisis in pretium nisl aliquet</ListItem>
</UnorderedList>
code Hide code

Changing the size of all list items in a UnorderedList

  • Lorem ipsum dolar set amet
  • Lorem ipsum dolar set amet
  • Lorem ipsum dolar set amet
  • Lorem ipsum dolar set amet
  • Lorem ipsum dolar set amet
<UnorderedList size={300}>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
</UnorderedList>
code Hide code

Adding icons to a list

The icon property has access to all available icons.

Set icons for all list items on the list

  • tickLorem ipsum dolar set amet
  • tickLorem ipsum dolar set amet
  • tickLorem ipsum dolar set amet
  • tickLorem ipsum dolar set amet
<UnorderedList
  icon="tick"
  iconColor="success"
>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
</UnorderedList>
code Hide code

Set icons on each individual list item

  • tick-circleLorem ipsum dolar set amet
  • tick-circleLorem ipsum dolar set amet
  • ban-circleLorem ipsum dolar set amet
  • ban-circleLorem ipsum dolar set amet
<UnorderedList>
  <ListItem icon="tick-circle" iconColor="success">
    Lorem ipsum dolar set amet
  </ListItem>
  <ListItem icon="tick-circle" iconColor="success">
    Lorem ipsum dolar set amet
  </ListItem>
  <ListItem icon="ban-circle" iconColor="danger">
    Lorem ipsum dolar set amet
  </ListItem>
  <ListItem icon="ban-circle" iconColor="danger">
    Lorem ipsum dolar set amet
  </ListItem>
</UnorderedList>
code Hide code

UnorderedList Props

This component composes ui-box

sizeenum = 400
Size of the text used in a list item. Can be: 300, 400, 500, 600.
iconstring
When passed, adds a icon before each list item in the list You can override this on a individual list item.
iconColorstring
The color of the icon in each list item in the list.

OrderedList component

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
<OrderedList>
  <ListItem>Lorem ipsum dolor sit amet</ListItem>
  <ListItem>Consectetur adipiscing elit</ListItem>
  <ListItem>Integer molestie lorem at massa</ListItem>
  <ListItem>Facilisis in pretium nisl aliquet</ListItem>
</OrderedList>
code Hide code

Changing the size of all list items in a OrderedList

  1. Lorem ipsum dolar set amet
  2. Lorem ipsum dolar set amet
  3. Lorem ipsum dolar set amet
  4. Lorem ipsum dolar set amet
  5. Lorem ipsum dolar set amet
<OrderedList size={300}>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
  <ListItem>Lorem ipsum dolar set amet</ListItem>
</OrderedList>
code Hide code

OrderedList Props

This component composes ui-box

sizeenum = 400
Size of the text used in a list item. Can be: 300, 400, 500, 600.

ListItem component

  • List item. Use inside of a UnorderedList or OrderedList.
  • <ListItem>List item. Use inside of a UnorderedList or OrderedList.</ListItem>
    
    code Hide code

    ListItem Props

    This component composes Text

    iconstring
    When passed, adds a icon before the list item. See Evergreen `Icon` for documentation.
    iconColorstring
    The color of the icon.