Skip to main content Skip to docs navigation
View on Git

Typography

Font size and weight utilities

Hero

examples

<Hero size="large">Hero large</Hero>
<Hero>Hero medium</Hero>
{% embed "@seduo-design-system/hero.twig" with { props: {
    size: 'large'
}} %}
    {% block content %}
        Hero large
    {% endblock %}
{% endembed %}


{% embed "@seduo-design-system/hero.twig" %}
    {% block content %}
        Hero medium
    {% endblock %}
{% endembed %}

<Hero size="large">Hero large</Hero>
<Hero>Hero medium</Hero>

API

Name Type Default Description
elementType HTML Element div HTML tag,
size large, medium medium Size of the text
color Brand, Text, Emotion, Theme color dictionary primary Specifies text color

Heading

inside the heading can be an anchor or Link component examples

<Heading size="xlarge">Heading xlarge</Heading>
<Heading size="xlarge" emphasis="bold">
  Heading xlarge bold
</Heading>
<Heading size="large">Heading large</Heading>
<Heading size="large" emphasis="bold">
  Heading large bold
</Heading>
<Heading size="medium">Heading medium</Heading>
<Heading size="medium" emphasis="bold">
  Heading medium bold
</Heading>
<Heading size="small">Heading small</Heading>
<Heading size="small" emphasis="bold">
  Heading small bold
</Heading>
<Heading size="xsmall">Heading xsmall</Heading>
<Heading size="xsmall" emphasis="bold">
  Heading xsmall bold
</Heading>
...
<Heading size="xlarge">
  Heading xlarge <a href="#">with anchor link</a>
</Heading>
<Heading size="large">
  Heading xlarge <Link href="#">with primary link</Link>
</Heading>
<Heading size="medium">
  Heading xlarge{" "}
  <Link href="#" color="secondary">
    with secondary link
  </Link>
</Heading>
<Heading size="small">
  Heading xlarge{" "}
  <Link href="#" color="tertiary">
    with tertiary link
  </Link>
</Heading>
{% embed "@seduo-design-system/heading.twig" %}
    {% block content %}
        Heading medium
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/heading.twig" with { props: {
    size: 'large',
    emphasis: 'bold'
}} %}
    {% block content %}
        Heading medium Bold
    {% endblock %}
{% endembed %}


<Heading size="xlarge">Heading xlarge</Heading>
<Heading size="xlarge">Heading xlarge <a href="#">with link</a></Heading>
<Heading size="xlarge" emphasis="bold">Heading xlarge bold</Heading>
<Heading size="large">Heading large</Heading>
<Heading size="large" emphasis="bold">Heading large bold</Heading>
<Heading size="medium">Heading medium</Heading>
<Heading size="medium" emphasis="bold">Heading medium bold</Heading>
<Heading size="small">Heading small</Heading>
<Heading size="small" emphasis="bold">Heading small bold</Heading>
<Heading size="xsmall">Heading xsmall</Heading>
<Heading size="xsmall" emphasis="bold">Heading xsmall bold</Heading>
...
<Heading size="xlarge">Heading xlarge <a href="#">with anchor link</a></Heading>
<Heading size="large">Heading xlarge <Link href="#">with primary link</Link></Heading>
<Heading size="medium">Heading xlarge <Link href="#" color="secondary">with secondary link</Link></Heading>
<Heading size="small">Heading xlarge <Link href="#" color="tertiary">with tertiary link</Link></Heading>

API

Name Type Default Description
elementType HTML Element div HTML tag,
size Size Extended dictionary medium Size of the text
color Brand, Text, Emotion, Theme color dictionary primary Specifies text color
emphasis bold regular Emphasis of the text
itemProp string undefined For Rich Snippets

Text

examples

<Text size="xsmall">body xsmall regular</Text>
<Text size="xsmall" emphasis="bold">
  body xsmall bold
</Text>
<Text size="xsmall" emphasis="italic">
  body xsmall italic
</Text>
<Text size="small">body small regular</Text>
<Text size="small" emphasis="bold">
  body small bold
</Text>
<Text size="small" emphasis="italic">
  body small italic
</Text>
<Text>body medium regular</Text>
<Text emphasis="bold">body medium bold</Text>
<Text emphasis="italic">body medium italic</Text>
<Text size="large">body large regular</Text>
<Text size="large" emphasis="bold">
  body large bold
</Text>
<Text size="large" emphasis="italic">
  body large italic
</Text>

{% embed "@seduo-design-system/text.twig" with { props: {
    size: 'xsmall'
}} %}
    {% block content %}
        example
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/text.twig" %}
    {% block content %}
        example
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/text.twig" with { props: {
    emphasis: 'bold'
} } %}
    {% block content %}
        example
    {% endblock %}
{% endembed %}

<Text size="xsmall">body xsmall regular</Text>
<Text size="xsmall" emphasis="bold">body xsmall bold</Text>
<Text size="xsmall" emphasis="italic">body xsmall italic</Text>
<Text size="small">body small regular</Text>
<Text size="small" emphasis="bold">body small bold</Text>
<Text size="small" emphasis="italic">body small italic</Text>
<Text>body medium regular</Text>
<Text emphasis="bold">body medium bold</Text>
<Text emphasis="italic">body medium italic</Text>
<Text size="large">body large regular</Text>
<Text size="large" emphasis="bold">body large bold</Text>
<Text size="large" emphasis="italic">body large italic</Text>

API

Name Type Default Description
elementType HTML Element p HTML tag,
size large, medium, small, xsmall medium Size of the text
color Brand, Text, Emotion, Theme color dictionary primary Specifies text color.
emphasis italic, bold regular Emphasis of the text

Color Typography components

examples

<Hero color="brand-primary">Hero text</Hero>
<Heading color="brand-secondary">Heading text</Heading>
<Text color="brand-light">Text</Text>
...
<Hero color="secondary-disabled">Hero text</Hero>
<Heading color="secondary">Heading text</Heading>
<Text color="light">Text</Text>
...
<Hero color="success">Hero success text</Hero>
<Heading color="success">Heading success text</Heading>
<Text color="success">Text success text</Text>
...
<Hero color="danger">Hero danger text</Hero>
<Heading color="danger">Heading danger text</Heading>
<Text color="danger">Text danger text</Text>
...
<Hero color="warning">Hero warning text</Hero>
<Heading color="warning">Heading warning text</Heading>
<Text color="warning">Text warning text</Text>
...
<Hero color="informative">Hero informative text</Hero>
<Heading color="informative">Heading informative text</Heading>
<Text color="informative">Text informative text</Text>
...
<Heading color="salmon-red">Heading theme Salmon red text</Heading>
<Heading color="aqua-blue">Heading theme Aqua blue text</Heading>
<Hero color="brand-primary">Hero text</Hero>
<Heading color="brand-secondary">Heading text</Heading>
<Text color="brand-light">Text</Text>

<Hero color="secondary-disabled">Hero text</Hero>
<Heading color="secondary">Heading text</Heading>
<Text color="light">Text</Text>

<Hero color="success">Hero success text</Hero>
<Heading color="success">Heading success text</Heading>
<Text color="success">Text success text</Text>

<Hero color="danger">Hero danger text</Hero>
<Heading color="danger">Heading danger text</Heading>
<Text color="danger">Text danger text</Text>

<Hero color="warning">Hero warning text</Hero>
<Heading color="warning">Heading warning text</Heading>
<Text color="warning">Text warning text</Text>

<Hero color="informative">Hero informative text</Hero>
<Heading color="informative">Heading informative text</Heading>
<Text color="informative">Text informative text</Text>

<Heading color="salmon-red">Heading theme Salmon red text</Heading>
<Heading color="aqua-blue">Heading theme Aqua blue text</Heading>
On this page