FTSE Russell Styleguide

Paragraphs 

<div class="ig-row">

    <div class="eight ig-columns offset-by-two">

        <div class="ig-legend">Standfirst</div>
        <!-- ig-legend -->

        <p>Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.</p>

        <hr class="hr--thick">

        <div class="ig-legend">Lede</div>
        <!-- ig-legend -->

        <p class="lede">His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.</p>

        <div class="ig-legend">Standard paragraph</div>
        <!-- ig-legend -->

        <p><svg class="ig-shape--circle" width="10vw" height="10vw" viewBox="0 0 160 161" aria-hidden="true">
    <circle class="ig-img--accent" cx="80" cy="80" r="80"></circle>
    <path class="ig-img--white" d="M70.234375,97.96875 L74.7265625,86.640625 L67.0117188,95.8203125 L41.328125,116.71875 L28.7304688,99.53125 L60.3710938,82.6367188 L71.40625,80.0976562 L60.6640625,77.9492188 L28.5351562,62.6171875 L40.9375,44.0625 L66.9140625,64.8632812 L74.7265625,73.4570312 L70.234375,61.25 L67.6953125,29.609375 L74.2382812,29.609375 C75.8007891,29.609375 77.4609287,29.6256509 79.21875,29.6582031 C80.9765713,29.6907554 82.6529868,29.7070312 84.2480469,29.7070312 L90.8398438,29.7070312 L88.3007812,61.25 L83.0273438,73.4570312 L91.9140625,63.59375 L117.109375,44.2578125 L131.464844,62.8125 L97.6757812,77.5585938 L86.3476562,80.0976562 L97.6757812,82.8320312 L131.171875,99.7265625 L116.71875,116.425781 L91.328125,95.7226562 L83.2226562,86.640625 L87.7148438,97.96875 L90.8398438,130.390625 L67.6953125,130.390625 L70.234375,97.96875 Z" id="*" fill="#393A36"></path>
  </svg> It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the scientific revolution and laid the material basis for the modern knowledge- based economy and the spread of learning to the masses.</p>

    </div>
    <!-- ig-columns -->

</div>
<!-- ig-row -->

<div class="ig-row">

    <div class="eight ig-columns offset-by-two">

        <div class="ig-legend">Secondary paragraph</div>
        <!-- ig-legend -->

        <p class="secondary">It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the scientific revolution and laid the material basis for the modern knowledge- based economy and the spread of learning to the masses.</p>

        <div class="ig-legend">Secondary paragraphs in columns</div>
        <!-- ig-legend -->

        <div class="type-columns">
            <p class="secondary">Gutenberg in 1439 was the first European to use the printing press and movable type in Europe. Among his many contributions to printing are: the invention of a process for mass-producing movable type; the use of oil-based ink for printing
                books; adjustable moulds; mechanical movable type; and the use of a wooden printing press similar to the agricultural screw presses of the period.</p>
        </div>
        <!-- type-columns -->

        <hr class="hr--thick">

        <div class="ig-legend">Text level</div>

        <p><abbr title="HyperText Markup Language">HTML</abbr> elements may be used within other elements. They include: <em>em</em> and <strong>strong</strong> for semantic emphasis, <i>i</i> and <b>b</b> for presentational formatting, <abbr title="Abbreviation">abbr</abbr>            abbreviations, <cite>cite</cite> citations, <code>code</code> example, <del>del</del>, <ins>ins</ins> for visibly deleted and inserted content, <dfn>dfn</dfn> definitions, <mark>mark</mark> for highlighted passages, <sup>sup</sup> superscript
            and <sub>sub</sub> subscript.</p>

        <div class="ig-legend">Small</div>
        <!-- ig-legend -->

        <small>His truly epochal invention was the combination of these elements into a practical system that allowed the mass production of printed books and was economically viable for printers and readers alike.</small>

    </div>
    <!-- ig-columns -->

</div>
<!-- ig-row -->
 
<div class="ig-row">

<div class="eight ig-columns offset-by-two">

<div class="ig-legend">Standfirst</div><!-- ig-legend -->

    <p>{{ paragraph_one }}</p>

    <hr class="hr--thick">

<div class="ig-legend">Lede</div><!-- ig-legend -->

    <p class="lede">{{ paragraph_two }}</p>

<div class="ig-legend">Standard paragraph</div><!-- ig-legend -->

    <p><svg class="ig-shape--circle" width="10vw" height="10vw" viewBox="0 0 160 161" aria-hidden="true">
    <circle class="ig-img--accent" cx="80" cy="80" r="80"></circle>
    <path class="ig-img--white" d="M70.234375,97.96875 L74.7265625,86.640625 L67.0117188,95.8203125 L41.328125,116.71875 L28.7304688,99.53125 L60.3710938,82.6367188 L71.40625,80.0976562 L60.6640625,77.9492188 L28.5351562,62.6171875 L40.9375,44.0625 L66.9140625,64.8632812 L74.7265625,73.4570312 L70.234375,61.25 L67.6953125,29.609375 L74.2382812,29.609375 C75.8007891,29.609375 77.4609287,29.6256509 79.21875,29.6582031 C80.9765713,29.6907554 82.6529868,29.7070312 84.2480469,29.7070312 L90.8398438,29.7070312 L88.3007812,61.25 L83.0273438,73.4570312 L91.9140625,63.59375 L117.109375,44.2578125 L131.464844,62.8125 L97.6757812,77.5585938 L86.3476562,80.0976562 L97.6757812,82.8320312 L131.171875,99.7265625 L116.71875,116.425781 L91.328125,95.7226562 L83.2226562,86.640625 L87.7148438,97.96875 L90.8398438,130.390625 L67.6953125,130.390625 L70.234375,97.96875 Z" id="*" fill="#393A36"></path>
  </svg> {{ paragraph_three }}</p>

</div><!-- ig-columns -->

</div><!-- ig-row -->

<div class="ig-row">

<div class="eight ig-columns offset-by-two">

<div class="ig-legend">Secondary paragraph</div><!-- ig-legend -->

    <p class="secondary">{{ paragraph_three }}</p>

<div class="ig-legend">Secondary paragraphs in columns</div><!-- ig-legend -->

    <div class="type-columns">
    <p class="secondary">{{ paragraph_four }}</p>
    </div><!-- type-columns -->

    <hr class="hr--thick">

    <div class="ig-legend">Text level</div>

    <p><abbr title="HyperText Markup Language">HTML</abbr> elements may be used within other elements. They include: <em>em</em> and <strong>strong</strong> for semantic emphasis, <i>i</i> and <b>b</b> for presentational formatting, <abbr title="Abbreviation">abbr</abbr> abbreviations, <cite>cite</cite> citations, <code>code</code> example, <del>del</del>, <ins>ins</ins> for visibly deleted and inserted content, <dfn>dfn</dfn> definitions, <mark>mark</mark> for highlighted passages, <sup>sup</sup> superscript and <sub>sub</sub> subscript.</p>

<div class="ig-legend">Small</div><!-- ig-legend -->

    <small>{{ paragraph_five }}</small>

</div><!-- ig-columns -->

</div><!-- ig-row -->
 
{
  "paragraph_one": "Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.",
  "paragraph_two": "His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.",
  "paragraph_three": "It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the scientific revolution and laid the material basis for the modern knowledge- based economy and the spread of learning to the masses.",
  "paragraph_four": "Gutenberg in 1439 was the first European to use the printing press and movable type in Europe. Among his many contributions to printing are: the invention of a process for mass-producing movable type; the use of oil-based ink for printing books; adjustable moulds; mechanical movable type; and the use of a wooden printing press similar to the agricultural screw presses of the period.",
  "paragraph_five": "His truly epochal invention was the combination of these elements into a practical system that allowed the mass production of printed books and was economically viable for printers and readers alike.",
  "paragraph_six": "Gutenberg’s method for making type is traditionally considered to have included a type metal alloy and a hand mould for casting type. The alloy was a mixture of lead, tin, and antimony that melted at a relatively low temperature for faster and more economical casting, cast well, and created a durable type. In Renaissance Europe, the arrival of mechanical movable type printing introduced the era of mass communication which permanently altered the structure of society. The relatively unrestricted circulation of information—including revolutionary ideas—transcended borders, captured the masses in the Reformation and threatened the power of political and religious authorities; the sharp increase in literacy broke the monopoly of the literate elite on education and learning and bolstered the emerging middle class. Across Europe, the increasing cultural self-awareness of its people led to the rise of proto-nationalism, accelerated by the flowering of the European vernacular languages to the detriment of Latin's status as lingua franca."
}
  • Content: 
    p {
    margin-top : 0;
    margin-bottom : $space-md;
    line-height: $line-height-base;
    font-size: $font-size-base;

    @include mq($breakpoint-lg) {
      font-size: $font-size-lg;
    }

    a {
        color: $secondary;
    }
}

/* Secondary, smaller than default. */

.secondary {
    font-size : $font-size-sm;

    @include mq($breakpoint-lg) {
      font-size: $font-size-base;
    }

    @include mq($breakpoint-xl) {

    }
}

/* Lede, larger than default. */

.lede {
    font-size: $font-size-lg;

    @include mq($breakpoint-lg) {
      font-size: $font-size-xl;
    }
}
  • URL: /components/raw/paragraphs/_type-paragraph.scss
  • Filesystem Path: src/components/atoms/typography/paragraphs/_type-paragraph.scss
  • Size: 592 Bytes

There are no notes for this item.