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="#">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>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>
    <h4>Heading 4</h4>
    <blockquote>
        This is a quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aliquid consectetur facere quasi. Possimus et repellat maxime eos blanditiis ipsa nostrum soluta assumenda reprehenderit. Architecto non expedita rerum vel et.
        <cite>- Person Name</cite>
    </blockquote>
    <h5>Heading 5</h5>
    <p class="text-large">Body text large. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <small>Body text small. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
    <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="#">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>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>
    <h4>Heading 4</h4>
    <blockquote>
        This is a quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aliquid consectetur facere quasi. Possimus et repellat maxime eos blanditiis ipsa nostrum soluta assumenda reprehenderit. Architecto non expedita rerum vel et.
        <cite>- Person Name</cite>
    </blockquote>
    <h5>Heading 5</h5>
    <p class="text-large">Body text large. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <small>Body text small. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
    <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"
}
  • Content: 
    .text {
    > * + * {
        margin-top: 1em;
    }

    > * + h1,
    > * + .h1,
    > * + h2,
    > * + .h2,
    > * + h3,
    > * + .h3,
    > * + h4,
    > * + .h4,
    > * + h5,
    > * + .h5 {
        margin-top: 1.5em;
    }
}

.text__margin-double {
    margin-top: 2em;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
    color: $L-text-strong;
}

h1,
.h1 {
    font-size: $font-size-h1-xs;
    line-height: $line-height-h1-xs;
    font-weight: $font-weight-bold;
    text-transform: uppercase;

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

h2,
.h2 {
    font-size: $font-size-h2-xs;
    line-height: $line-height-h2-xs;
    font-weight: $font-weight-bold;
}

h3,
.h3 {
    font-size: $font-size-h3-xs;
    line-height: $line-height-h3-xs;
    font-weight: $font-weight-bold;
    letter-spacing: $letter-spacing-default;
}

h4:not([class]),
.h4 {
    font-size: $font-size-h4-xs;
    line-height: $line-height-h4-xs;
    font-weight: $font-weight-regular;
    text-transform: uppercase;

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

h5:not([class]),
.h5 {
    font-size: $font-size-h5-xs;
    line-height: $line-height-h5-xs;
    font-weight: $font-weight-medium;
    letter-spacing: $letter-spacing-75;
    text-transform: uppercase;

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

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

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

.text-inverted {
    font-size: $font-size-base;
    color: $L-text-inverted;
    font-weight: $font-weight-medium;
}

.text-medium {
    font-weight: $font-weight-medium;
}

.text-black {
    color: #000000;
}

.text-base {
    color: $L-text;
}

.text-margin {
    margin: 24px 0 16px;
}

.h4--margin {
    margin: 16px 0;

    @include bp(lg-min) {
        margin: 32px 0 16px;
    }
}

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

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

a:not([class]),
.link {
    color: $L-link;
    text-decoration: underline;

    &:hover {
        color: $L-link-hover;
    }

    &:focus {
        color: $L-link-focus;
    }

    &:active {
        color: $L-link-active;
    }
}

blockquote,
.blockquote {
    font-size: $font-size-quote-xs;
    line-height: $line-height-quote-xs;
    font-weight: $font-weight-bold;
    color: $L-text-strong;

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

    cite {
        margin-top: 1em;
        font-size: $font-size-base;
        line-height: $line-height-base;
        font-weight: $font-weight-regular;
        color: $L-text;
        display: block;

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

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

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

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

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

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

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

    li:before {
        counter-increment: li;
        content: counter(li, decimal-leading-zero) '.';
        position: absolute;
        top: 0;
        left: 0;
    }
}

p {
    font-size: $font-size-base;
    letter-spacing: $letter-spacing-default;
    line-height: $line-height-small;
    color: $L-text;
}

.text-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  • URL: /components/raw/typography/typography.scss
  • Filesystem Path: src/patterns/components/typography/typography.scss
  • Size: 4.1 KB
  • Handle: @typography--default
  • Filesystem Path: src/patterns/components/typography/typography.twig