text

For copy text, use the atom as showcased below to have already-correct margins, font-sizes and so on.

table of content

description
component variations
- Full
- Headline 2 with standard style highlight-3xl
style scss

component variations

Full

Headline 1 with standard style highlight-4xl

Paragraph text with style text-l. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Paragraph text with standard style text-m. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et I’m Bold et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet „Italic style consetetur sadipscing elitr“ sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 2 with standard style highlight-3xl

Paragraph text with standard style text-m. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Headline 2 with standard style highlight-3xl

Headline 3 with standard style highlight-2xl

Headline 4 with standard style highlight-x

Headline 5 with standard style highlight-l

Paragraph text with style text-s. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

<div class="a-text">
  <h1>Headline 1 with standard style highlight-4xl</h1>
  <p>
    Paragraph text with style text-l. Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam.
  </p>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    <strong>I’m Bold et justo duo dolores et ea rebum.</strong>
    Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet
    <i>„Italic style consetetur sadipscing elitr“</i>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
  </p>
  <h2>Headline 2 with standard style highlight-3xl</h2>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    <strong>I’m Bold et justo duo dolores et ea rebum.</strong>
    Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet
    <i>„Italic style consetetur sadipscing elitr“</i>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
  </p>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet. Lorem
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam.
  </p>
  <h2>Headline 2 with standard style highlight-3xl</h2>
  <h3>Headline 3 with standard style highlight-2xl</h3>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet. Lorem
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam.
  </p>
  <h4>Headline 4 with standard style highlight-x</h4>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet. Lorem
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam.
  </p>
  <h5>Headline 5 with standard style highlight-l</h5>
  <p>
    Paragraph text with style text-s. Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam.
  </p>
</div>

Headline 2 with standard style highlight-3xl

Open on blank page

Headline 2 with standard style highlight-3xl

<div class="a-text">
  <h2>Headline 2 with standard style highlight-3xl</h2>
  <p>
    Paragraph text with standard style text-m. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    <strong>I’m Bold et justo duo dolores et ea rebum.</strong>
    Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet
    <i>„Italic style consetetur sadipscing elitr“</i>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
  </p>
</div>

additional content

styles SCSS

.a-text {
  :last-child {
    margin-bottom: 0;
  }

  :first-child {
    margin-top: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 2.5rem 0 1.5rem;
  }

  p {
    margin: 0 0 1.5rem;
  }
}