Copy environment

Typography 

<div class="text">
    <h1>Heading 1</h1>
    <p>This is a paragraph. <em>This text is cursive</em>, <strong>but this text is bold</strong>. <a href="#" class="link">This is a link<svg class="icon  link__icon">
                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
            </svg>
        </a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt aspernatur blanditiis optio eaque cumque vitae necessitatibus assumenda repudiandae, aut placeat quisquam ea accusamus, repellendus quas commodi porro perferendis expedita sunt.</p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt aspernatur blanditiis optio eaque cumque vitae necessitatibus assumenda repudiandae, aut placeat quisquam ea accusamus, repellendus quas commodi porro perferendis expedita sunt.</p>
    <p><small>Body text small. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
    <p class="text-tiny">Body text tiny. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <blockquote class="blockquote  ">
        <svg class="icon  blockquote__icon animation__target">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
        </svg>
        <div class="blockquote__content animation__target">
            Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
        </div>
        <div class="blockquote__cite animation__target">
            <figure class="image  blockquote__image">
                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

            </figure>
            <cite class="blockquote__cite-creds">
                <span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
                <span class="blockquote__creds text-small">Telia</span>
            </cite>
        </div>
    </blockquote>
    <blockquote class="blockquote blockquote--large ">
        <svg class="icon  blockquote__icon animation__target">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
        </svg>
        <div class="blockquote__content animation__target">
            Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
        </div>
        <div class="blockquote__cite animation__target">
            <figure class="image  blockquote__image">
                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

            </figure>
            <cite class="blockquote__cite-creds">
                <span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
                <span class="blockquote__creds text-small">Telia</span>
            </cite>
        </div>
    </blockquote>
    <ul>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
    </ul>
    <ol>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
    </ol>
</div>
 
<div class="text">
    <h1>Heading 1</h1>
    <p>This is a paragraph. <em>This text is cursive</em>, <strong>but this text is bold</strong>. <a href="#" class="link">This is a link{% include '@icon' with {name: 'tiny-right-top-24', modifier: '', class: 'link__icon'} %}</a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt aspernatur blanditiis optio eaque cumque vitae necessitatibus assumenda repudiandae, aut placeat quisquam ea accusamus, repellendus quas commodi porro perferendis expedita sunt.</p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt aspernatur blanditiis optio eaque cumque vitae necessitatibus assumenda repudiandae, aut placeat quisquam ea accusamus, repellendus quas commodi porro perferendis expedita sunt.</p>
    <p><small>Body text small. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small></p>
    <p class="text-tiny">Body text tiny. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    {% include '@blockquote' with {modifier: '', class: '', data: data.quote} %}
    {% include '@blockquote' with {modifier: 'blockquote--large', class: '', data: data.quote} %}
    <ul>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
    </ul>
    <ol>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <li>ordered list item</li>
    </ol>
</div>

{
  "language": "en-US",
  "data": {
    "quote": {
      "content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
      "author": {
        "image": true,
        "name": "Name Lastname",
        "position": "Assistant To The Manager",
        "company": "Telia"
      }
    }
  }
}
  • Content: 
    @font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-Regular.woff2') format('woff2'),
        url('./fonts/HKGrotesk-Regular.woff') format('woff');
    font-weight: $font-weight-regular;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-Italic.woff2') format('woff2'),
        url('./fonts/HKGrotesk-Italic.woff') format('woff');
    font-weight: $font-weight-regular;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-Medium.woff2') format('woff2'),
        url('./fonts/HKGrotesk-Medium.woff') format('woff');
    font-weight: $font-weight-medium;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-MediumItalic.woff2') format('woff2'),
        url('./fonts/HKGrotesk-MediumItalic.woff') format('woff');
    font-weight: $font-weight-medium;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-Bold.woff2') format('woff2'),
        url('./fonts/HKGrotesk-Bold.woff') format('woff');
    font-weight: $font-weight-bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('./fonts/HKGrotesk-BoldItalic.woff2') format('woff2'),
        url('./fonts/HKGrotesk-BoldItalic.woff') format('woff');
    font-weight: $font-weight-bold;
    font-style: italic;
    font-display: swap;
}

.text {
    > * + * {
        margin-top: 1.5em;
    }
}

h1:not([class]),
.h1 {
    font-size: $font-size-h1-xs;
    line-height: $line-height-h1-xs;
    font-weight: $font-weight-bold;

    @include bp(sm-min) {
        font-size: $font-size-h1-lg;
        line-height: $line-height-h1-lg;
    }
}

h2:not([class]),
.h2 {
    font-size: $font-size-h2-xs;
    line-height: $line-height-h2-xs;
    font-weight: $font-weight-medium;

    @include bp(sm-min) {
        font-size: $font-size-h2-lg;
        line-height: $line-height-h2-lg;
    }
}

h3:not([class]),
.h3 {
    font-size: $font-size-h3-xs;
    line-height: $line-height-h3-xs;
    font-weight: $font-weight-medium;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        line-height: $line-height-h3-lg;
    }
}

small,
.text-small {
    font-size: $font-size-small;
    line-height: $line-height-small;

    > * + * {
        margin-top: 12px;
    }
}

.text-tiny {
    font-size: $font-size-tiny;
    line-height: $line-height-tiny;
}

i,
em,
.italic {
    font-style: italic;
}

b,
strong,
.bold {
    font-weight: $font-weight-bold;
}

a:not([class]),
.link {
    font-weight: $font-weight-bold;
    color: $color-brand-01;
    text-decoration: none;

    &:hover {
        text-decoration: none;
    }
}

.link__icon {
    font-size: $font-size-quote-large-xs;
    vertical-align: middle;
    margin: 0 0 2px 2px;
    transition-property: transform;
    transition-duration: $transition-duration;
    transition-timing-function: $transition-easing-in;
    will-change: transform; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    .link:hover & {
        transition-timing-function: $transition-easing-out;
        transform: rotate(45deg);
    }
}

ul.list,
ul:not([class]) {
    > li {
        padding-left: 28px;
        position: relative;

        &:not(:last-child) {
            margin-bottom: 10px;
        }

        &:before {
            content: '';
            top: 9px;
            position: absolute;
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: $border-radius-round;
            display: inline-block;
            background-color: $color-brand-01;

            .hero & {
                background-color: $color-text-03;
            }
        }
    }
}

ol.list,
ol:not([class]) {
    counter-reset: li;

    > li {
        position: relative;
        padding-left: 40px;

        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }

    li:before {
        counter-increment: li;
        content: counter(li, decimal-leading-zero) '.';
        position: absolute;
        top: 0;
        left: 0;
    }
}
  • URL: /components/raw/typography/typography.scss
  • Filesystem Path: src/patterns/components/typography/typography.scss
  • Size: 4.3 KB
  • Handle: @typography--default
  • Filesystem Path: src/patterns/components/typography/typography.twig
  • References (2): @icon, @blockquote