h2 element by default.span element by default.p element by default.a element by default.strong element by default.small element by default.pre element by default.code element by default.ol element.ul element.li element.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.
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
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.
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 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.
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.
The Link component is used for anchor links.
This component renders a a element by default.
The size options are: 300, 400 (default), 500
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 Small component works only inside other text components.
The Code component is based on the Text component but renders a code element by default.
The Pre component renders a chunk of preformatted text.
This component renders a pre element by default.
The icon property has access to all available icons.