Typography

Typography components

yarn add @smashing/typography

Text (span)

<Text>I'm inline text</Text>
<Text color="muted">I'm inline text</Text>
<Text color="default">I'm inline text</Text>
<Text color="intense">I'm inline text</Text>
<Text intent="danger">I'm inline text</Text>
<Text intent="warning">I'm inline text</Text>
<Text intent="info">I'm inline text</Text>
<Text intent="success">I'm inline text</Text>
<Text size={300}>I'm inline text</Text>
<Text size={400}>I'm inline text</Text>
<Text size={500}>I'm inline text</Text>
<Text size={600}>I'm inline text</Text>

Heading (h2)

<Heading>I'm a heading</Heading>
<Heading as="h1" size={100}>I'm a heading</Heading>
<Heading as="h6" size={200}>I'm a heading</Heading>
<Heading size={300}>I'm a heading</Heading>
<Heading size={400}>I'm a heading</Heading>
<Heading size={500}>I'm a heading</Heading>
<Heading size={600}>I'm a heading</Heading>
<Heading size={700}>I'm a heading</Heading>
<Heading size={800}>I'm a heading</Heading>
<Heading size={900}>I'm a heading</Heading>

Paragraph (p)

<Paragraph>I'm a paragraph</Paragraph>
<Paragraph size={300}>I'm a paragraph</Paragraph>
<Paragraph size={400}>I'm a paragraph</Paragraph>
<Paragraph size={500}>I'm a paragraph</Paragraph>
<Paragraph size={600}>I'm a paragraph</Paragraph>

Strong (strong)

<Strong>I'm a strong tag</Strong>
<Strong size={300}>I'm a strong tag</Strong>
<Strong size={400}>I'm a strong tag</Strong>
<Strong size={500}>I'm a strong tag</Strong>
<Strong size={600}>I'm a strong tag</Strong>

2019-04-24

:rocket: New Feature

• button, dialog, overlay, theme
  • #18 feat: add dialog and overlay (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-23

:rocket: New Feature

• alert, avatar, build-utils, button, menu, popover, portal, positioner, stack, text-input, theme, tooltip, typography
  • #17 feat(*): add stack, portal, positioner, menu, popover, tooltip (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-18

:rocket: New Feature

• avatar, theme
  • #16 Add Avatar component (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-16

:rocket: New Feature

• alert, theme
  • #15 Add Alert component (@Idered)
• typography
  • #14 Add Label component (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-03

:rocket: New Feature

• button, text-input, theme, typography
  • #12 Add TextInput component (@Idered)

:bug: Bug Fix

• typography
  • #11 Fix fontFamily always overriding component style (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-02

:nail_care: Enhancement

• button, theme, typography
  • #10 Make components styleable via SmashingThemeProvider (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-04-01

:rocket: New Feature

• typography, button, theme
  • #9 Add Button component (@Idered)

:house: Internal

• #8 Add a11y to storybook (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)

2019-03-31

:rocket: New Feature

• typography
  • #7 Add Typography/Paragraph component (@Idered)
  • #6 Add Typography/Strong component (@Idered)
• theme, typography
  • #5 Add Typography/Heading component (@Idered)
• build-utils, theme, typography
  • #3 Add theme and typography packages (@Idered)

:house: Internal

• #4 Improve release command (@Idered)
• #2 Add changelog generator (@Idered)
• #1 Add Storybook (@Idered)

Committers: 1

• Kasper Mikiewicz (@Idered)