ETR Component Library

rich-text 

<div class="rich-text">
    <h1>Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris.</h1>
    <h2>Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <h2>Heading 2 Nullam id dui id felis laoreet tincidunt at sed mauris</h2>
    <h3>Heading 3 Nullam id dui id felis laoreet tincidunt at sed mauris</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <h4>Heading 4 Nullam id dui id felis laoreet tincidunt at sed mauris</h4>
    <h5>Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <h6>Heading 6 Nullam id dui id felis laoreet tincidunt at sed mauris</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>

    <blockquote>
        <p>Blockquote ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere
            metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    </blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
    <h2>Heading 2 Nullam id dui id felis laoreet tincidunt at sed mauris. </h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus
        ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>

    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Nullam id dui id felis laoreet tincidunt at sed mauris.</li>
        <li>Lorem ipsum dolor sit amet. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget
            gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</li>
    </ul>

    <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Nullam id dui id felis laoreet tincidunt at sed mauris.</li>
        <li>Lorem ipsum dolor sit amet. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget
            gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</li>
    </ol>

</div>
 
<div class="rich-text">
  <h1>Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris.</h1>
  <h2>Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
 <h2>Heading 2 Nullam id dui id felis laoreet tincidunt at sed mauris</h2>
  <h3>Heading 3 Nullam id dui id felis laoreet tincidunt at sed mauris</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  <h4>Heading 4 Nullam id dui id felis laoreet tincidunt at sed mauris</h4>
    <h5>Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  <h6>Heading 6 Nullam id dui id felis laoreet tincidunt at sed mauris</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>

  <blockquote>
    <p>Blockquote ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  </blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>
  <h2>Heading 2 Nullam id dui id felis laoreet tincidunt at sed mauris. </h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dui id felis laoreet tincidunt at sed mauris. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</p>

  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Nullam id dui id felis laoreet tincidunt at sed mauris.</li>
    <li>Lorem ipsum dolor sit amet. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</li>
  </ul>

  <ol>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Nullam id dui id felis laoreet tincidunt at sed mauris.</li>
    <li>Lorem ipsum dolor sit amet. Suspendisse diam nisl, fermentum vel risus non, luctus volutpat sapien. Sed cursus quis nulla in fringilla. Fusce congue posuere metus ac ornare. Donec volutpat fermentum erat et ornare. Morbi aliquam quis enim eget gravida. Fusce finibus nisi at sapien sollicitudin congue. Maecenas in ultrices leo, sit amet vehicula sapien.</li>
  </ol>

</div>
 
/* No context defined for this component. */
  • Content: 
    .rich-text {

  @apply text-gray-darkest;

  // Margins

  h1 + * {
    @apply .mt-8;
  }

  * + h2 {
    @apply .mt-8;
  }

  h2 + * {
    @apply .mt-4;
  }

  * + h3 {
    @apply .mt-6;
  }

  h2 + h3 {
    @apply .mt-4;
  }

  h3 + *, h4 + *, h5 + * h6 + * {
    @apply .mt-4;
  }

  * + h4, * + h5, * + h6 {
    @apply .mt-8;
  }

  h3 + h4, h4 + h5, h5 + h6 {
    @apply .mt-4;
  }


  * {
    + ul, + ol {
      @apply .mt-4;
    }
  }

  * + p {
    @apply .mt-2;
  }

  p + p {
    @apply .mt-4;
  }

  * + ol {
    @apply .mt-4;
  }

  ol + * {
    @apply .mt-4;
  }

  li ol {
    @apply .mt-2;
  }

  * + ul {
    @apply .mt-4;
  }

  ul + * {
    @apply .mt-4;
  }

  li ul {
    @apply .mt-2;
  }

  li + li {
    @apply .mt-2;
  }

  li p {
    @apply .mt-4;
  }

  li p + p {
    @apply .mt-2;
  }

  li:first-child p:first-child {
    @apply .mt-2;
  }

  * + blockquote {
    @apply .mt-8;
  }

  blockquote + * {
    @apply .mt-8;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply leading-tight font-sans;
  }

  p, ul, ol, li {
    @apply leading-normal text-gray-darker font-serif;
  }

  blockquote {
    @apply .pl-4 .border-solid .border-l-4 .border-gray-light .italic;
  }

  h1 {
    @apply .text-4xl font-light;
  }

  h2 {
    @apply .text-3xl font-light;
  }

  h3 {
    @apply .text-2xl font-normal;
  }

  h4 {
    @apply .text-xl font-normal;
  }

  h5 {
    @apply .text-lg font-normal;
  }

  h6 {
    @apply .text-base .uppercase tracking-wider font-normal;
  }

  ul, ol {
    @apply .pl-5;
  }

  ul {
    @apply .list-disc;
  }

  ol {
    @apply .list-decimal;
  }
}
  • URL: /components/raw/rich-text/rich-text.scss
  • Filesystem Path: components/05-layout-components/rich-text/rich-text.scss
  • Size: 1.6 KB

There are no notes for this item.