<article class="container container--sm text-component">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta repudiandae aperiam tenetur, delectus laborum <a href="#0">this is a link</a> nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.</p>

    <p class="text--subtle text--sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nesciunt necessitatibus distinctio accusamus reprehenderit cupiditate et, iusto, dicta quo odio quis omnis natus ea veniam, similique fugit quia consequatur enim!</p>

    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus <s>content no longer accurate</s> consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.</p>

    <p><a href="#0" class="btn btn--primary">Button</a></p>

    <blockquote>(blockquote) Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt voluptatem, asperiores tenetur vel animi minima iusto rem reprehenderit blanditiis ducimus?</blockquote>

    <p class="drop-cap">Lorem ipsum dolor sit amet consectetur adipisicing elit. <mark>This is highlighted text</mark> iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.</p>

    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore pariatur, in iste non alias quas ratione laboriosam ea voluptatem numquam explicabo ut! Beatae quisquam hic nihil autem obcaecati, labore placeat.</li>
        <li>Lorem ipsum dolor sit amet consectetur</li>
        <li>Lorem ipsum dolor sit amet consectetur</li>
    </ul>

    <hr>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et eligendi eaque enim voluptates ipsa sit dignissimos? Odio, consequuntur ex! Quis error cupiditate architecto odio perspiciatis provident reprehenderit atque ullam earum.</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et eligendi eaque enim voluptates ipsa sit dignissimos? Odio, consequuntur ex! Quis error cupiditate architecto odio perspiciatis provident reprehenderit atque ullam earum.</p>

    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.</p>
    
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore pariatur, in iste non alias quas ratione laboriosam ea voluptatem numquam explicabo ut! Beatae quisquam hic nihil autem obcaecati, labore placeat.</li>
        <li>Lorem ipsum dolor sit amet consectetur</li>
        <li>Lorem ipsum dolor sit amet consectetur</li>
    </ol>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste illo molestias eius quidem iusto rem voluptatem, quis atque dolores mollitia maiores consequuntur totam quae eligendi ratione harum fugit architecto quibusdam vitae unde laboriosam excepturi placeat.</p>

    <h4>Heading 4</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.</p>
</article>

.text-component {
    --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier));
    --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier));
    --line-height-multiplier: 1; // edit this
    --text-vspace-multiplier: 1; // edit this

    h1, h2, h3, h4 {
        line-height: var(--component-heading-line-height);
        margin-bottom: calc(var(--space-xxxs) * var(--text-vspace-multiplier));
    }

    h2, h3, h4 {
        margin-top: calc(var(--space-sm) * var(--text-vspace-multiplier));
    }

    p, blockquote, ul li, ol li {
        line-height: var(--component-body-line-height);
    }
    
    ul, ol, p, blockquote {
        margin-bottom: calc(var(--space-md) * var(--text-vspace-multiplier));
    }

    hr {
        margin: calc(var(--space-lg) * var(--text-vspace-multiplier)) auto;
    }
}

// some basic style
body {
	padding: 2em 0;
}