Rich Text 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/richtext.css?cb=">

<div class="richtext"><span class='richtext__heading01'>Heading 1</span><span class='richtext__heading02'>Heading 2</span><span class='richtext__heading03'>Heading 3</span><span class='richtext__heading04'>Heading 4</span><span class='richtext__lead'>Lead</span><span class='richtext__heading02'>Paragraph</span>
    <p>Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim.</p><span class='richtext__heading02'>Fine</span>
    <p class='richtext__fine'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.tum fermentum.</p><span class='richtext__heading02'>Small</span>
    <p class='richtext__small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum.</p><span class='richtext__heading02'>Extra small</span>
    <p class='richtext__x-small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class='richtext__heading02'>Links</span>
    <p><a href='#'>This is a text link</a></p><span class='richtext__heading02'>Lists</span>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ol>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <p><strong>Strong is used to indicate strong importance</strong></p>
    <p><em>This text has added emphasis</em></p>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/richtext.css?cb={{cacheBuster}}">
{{/if}}

<div class="richtext">{{{html}}}</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "html": "<span class='richtext__heading01'>Heading 1</span><span class='richtext__heading02'>Heading 2</span><span class='richtext__heading03'>Heading 3</span><span class='richtext__heading04'>Heading 4</span><span class='richtext__lead'>Lead</span><span class='richtext__heading02'>Paragraph</span><p>Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim.</p><span class='richtext__heading02'>Fine</span><p class='richtext__fine'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.tum fermentum.</p><span class='richtext__heading02'>Small</span><p class='richtext__small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum.</p><span class='richtext__heading02'>Extra small</span><p class='richtext__x-small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class='richtext__heading02'>Links</span><p><a href='#'>This is a text link</a></p><span class='richtext__heading02'>Lists</span><ol>    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>    <li>Aliquam tincidunt mauris eu risus.</li>    <li>Vestibulum auctor dapibus neque.</li></ol><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>    <li>Aliquam tincidunt mauris eu risus.</li>    <li>Vestibulum auctor dapibus neque.</li></ul><p><strong>Strong is used to indicate strong importance</strong></p><p><em>This text has added emphasis</em></p>"
}
  • Content: 
    @use "sass:map";

@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.richtext {
    ul {
        @extend %unordered-list;
    }

    ol {
        @extend %ordered-list;
    }

    p {
        @extend %spacer-small;
    }

    &__heading01 {
        @extend %heading01;
    }

    &__heading02 {
        @extend %heading02;
    }

    &__heading03 {
        @extend %heading03;
    }

    &__heading04 {
        @extend %heading04;
    }

    &__fine {
        @extend %p--fine;
    }

    &__lead {
        @extend %p--lead;
    }

    &__small {
        @extend %p--small;
    }
}
  • URL: /components/raw/rich-text/richtext.scss
  • Filesystem Path: source/patterns/03-components/text/rich-text/richtext.scss
  • Size: 616 Bytes

No notes defined.