Prose

This module helps to display articles and any text with good typography and spacing between the tags of text, images, tables, etc.

Usage

To use the module, just specify prose-body class for the content container and all the text inside will get Prose styles.

The quick brown
fox jumps over lazy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The quick brown fox
jumps over the lazy dog

.is-small {
    font-size: 13px;
    line-height: 20px;
}
.is-title {
    font-size: 56px;
    line-height: 68px;
    margin-bottom: 2rem;
}

The quick brown fox jumps over the lazy dog

Orion's sword extraordinary claims require extraordinary evidence tingling of the spine permanence of the stars globular star cluster Cambrian explosion.

— Author attribution

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Sed do eiusmod tempor incididunt ut labore.

Table Header	Another Header
Josh Rabbel	Player
Column 1	Column 2
Column 1	Column 2
Column 1	Column 2


<div class="prose">
    <div class="prose-head mb-5">
        <h1 class="prose-title">...</h1>
        <p class="prose-lead">...</p>
    </div>
    <div class="prose-body">
        <p>...</p>
        <h2>...</h2>
        <p>...</p>
        <h3>...</h3>
        ...
    </div>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// spacing
--prose-h1-to-tag: 5rem;
--prose-h2-to-tag: 3rem;
--prose-h3-to-tag: 3rem;
--prose-h4-to-tag: 2rem;
--prose-h5-to-tag: 2rem;
--prose-h6-to-tag: 2rem;
--prose-tag-to-tag: 5rem;
--prose-tag-to-h2: 10rem;
--prose-tag-to-h3: 8rem;
--prose-tag-to-h4: 8rem;
--prose-tag-to-h5: 8rem;
--prose-tag-to-h6: 8rem;
--prose-figure-to-tag: 6rem;

// sizing
--prose-h1-font-size: 64px;
--prose-h1-line-height: 1.1;

--prose-h2-font-size: 32px;
--prose-h2-line-height: 1.2;

--prose-h3-font-size: 20px;
--prose-h3-line-height: 1.3;

--prose-h4-font-size: 16px;
--prose-h4-line-height: 1.4;

--prose-h5-font-size: 16px;
--prose-h5-line-height: 1.4;

--prose-h6-font-size: 16px;
--prose-h6-line-height: 1.4;

--prose-lead-font-size: 24px;
--prose-lead-line-height: 1.4;

--prose-p-font-size: 16px;
--prose-p-line-height: 1.5;

Prose

Usage

The quick brown fox jumps over lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Variables #

The quick brown
fox jumps over lazy

The quick brown fox
jumps over the lazy dog