Copy environment

Typography 

<div class="text">
    <h1>Heading 1</h1>
    <p>This is a paragraph. Umlauts öäõü ÖÄÕÜ. <a href="#">This is a link</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 class="text-large">This is large text. <a href="#">This is a link</a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
    <h3>Heading 3</h3>
    <p class="text-small">This is small text. <a href="#">This is a link</a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
</div>
 
<div class="text">
    <h1>Heading 1</h1>
    <p>This is a paragraph. Umlauts öäõü ÖÄÕÜ. <a href="#">This is a link</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 class="text-large">This is large text. <a href="#">This is a link</a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
    <h3>Heading 3</h3>
    <p class="text-small">This is small text. <a href="#">This is a link</a> voluptatum delectus, similique et dolorem dolorum natus eaque debitis dolores, est dolore maxime! Quidem maiores nihil nobis quia unde provident.</p>
</div>

{
  "language": "en-US"
}
  • Content: 
    @font-face {
    font-family: 'Telegraf';
    src: url('./fonts/Telegraf-Regular.woff'),
        url('./fonts/Telegraf-Regular.woff2');
    font-weight: $font-weight-normal;
    font-style: normal;
}

@font-face {
    font-family: 'Telegraf';
    src: url('./fonts/Telegraf-UltraLight.woff'),
        url('./fonts/Telegraf-UltraLight.woff2');
    font-weight: $font-weight-thin;
    font-style: normal;
}

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

h1,
.h1 {
    font-size: $font-size-h1;
    font-weight: $font-weight-thin;
    line-height: $font-line-height-h1;

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

h2,
.h2 {
    font-size: $font-size-h2;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-h2;
    text-transform: uppercase;

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

h3,
.h3 {
    font-size: $font-size-h3;
    font-weight: $font-weight-thin;
    line-height: $font-line-height-h3;

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

.text-large {
    font-size: $font-size-large;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-large;

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

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

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

.text-button {
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

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

a {
    color: inherit;
    line-height: inherit;
    text-decoration: none;
}

.text > a,
.link {
    position: relative;
    color: inherit;
    line-height: inherit;
    text-decoration: none;

    &:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid;
        transition: width $transition-duration $transition-easing $transition-duration, border-bottom $transition-duration $transition-easing;
    }

    &:hover:before {
        @media (hover: hover) {
            width: 0;
            transition: width $transition-duration $transition-easing, border-bottom $transition-duration $transition-easing;
        }
    }

    &:hover:after {
        @media (hover: hover) {
            width: 100%;
            transition: width $transition-duration $transition-easing $transition-duration, border-bottom $transition-duration $transition-easing;
        }
    }

    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        border-bottom: 1px solid;
        transition: width $transition-duration $transition-easing, border-bottom $transition-duration $transition-easing;
    }
}
  • URL: /components/raw/typography/typography.scss
  • Filesystem Path: src/patterns/components/typography/typography.scss
  • Size: 3.3 KB
  • Handle: @typography--default
  • Filesystem Path: src/patterns/components/typography/typography.twig