FTSE Russell Styleguide

Headings 

<div class="ig-row">

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

        <div class="ig-legend">Heading level one</div>
        <!-- ig-legend -->

        <h1>Johannes Gutenberg</h1>

        <p class="lede ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

        <div class="ig-legend">Heading level two</div>
        <!-- ig-legend -->

        <h2>Aquatint</h2>

        <p class="ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

        <div class="ig-legend">Heading level three</div>
        <!-- ig-legend -->

        <h3>Chromolithography</h3>

        <p class="ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

        <div class="ig-legend">Heading level four</div>
        <!-- ig-legend -->

        <h4>Etching</h4>

        <p class="ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

        <div class="ig-legend">Heading level five</div>
        <!-- ig-legend -->

        <h5>Lithography</h5>

        <p class="secondary ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

        <div class="ig-legend">Heading level six</div>
        <!-- ig-legend -->

        <h6>Mezzotint</h6>

        <p class="secondary ig-context">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

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

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

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

<div class="ig-legend">Heading level one</div><!-- ig-legend -->

    <h1>{{ headline_one }}</h1>

    <p class="lede ig-context">{{ paragraph }}</p>

<div class="ig-legend">Heading level two</div><!-- ig-legend -->

    <h2>{{ headline_two }}</h2>

    <p class="ig-context">{{ paragraph }}</p>

<div class="ig-legend">Heading level three</div><!-- ig-legend -->

    <h3>{{ headline_three }}</h3>

    <p class="ig-context">{{ paragraph }}</p>

<div class="ig-legend">Heading level four</div><!-- ig-legend -->

    <h4>{{ headline_four }}</h4>

    <p class="ig-context">{{ paragraph }}</p>

<div class="ig-legend">Heading level five</div><!-- ig-legend -->

    <h5>{{ headline_five }}</h5>

    <p class="secondary ig-context">{{ paragraph }}</p>

<div class="ig-legend">Heading level six</div><!-- ig-legend -->

    <h6>{{ headline_six }}</h6>

    <p class="secondary ig-context">{{ paragraph }}</p>

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

</div><!-- ig-row -->
 
{
  "headline_one": "Johannes Gutenberg",
  "headline_two": "Aquatint",
  "headline_three": "Chromolithography",
  "headline_four": "Etching",
  "headline_five": "Lithography",
  "headline_six": "Mezzotint",
  "list_item_one": "Aquatint",
  "list_item_two": "Chromolithography",
  "list_item_three": "Etching",
  "list_item_four": "Lithography",
  "list_item_five": "Mezzotint",
  "list_item_six": "Movable type",
  "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
}
  • Content: 
    h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top : 0;
  margin-bottom : $space-md;
  font-family : $font-family-base;
  font-weight : $font-weight-base;
  line-height : $line-height-base;

  &:empty {
    display: none;
    margin: 0;
  }
}

h1, .h1 {

  font-size: $font-size-xl;

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

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

h2, .h2 {
  font-size: $font-size-lg;

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

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

h3, .h3 {
  font-size: $font-size-base;

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

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

h4, .h4 {
  font-size: $font-size-sm;

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

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

:lang(ja) {
  h4, h5, h6 {
    font-size: 95%;
  }
  h3 {
    font-size: 1.750rem;
  }
}
  • URL: /components/raw/headings/_type-heading.scss
  • Filesystem Path: src/components/atoms/typography/headings/_type-heading.scss
  • Size: 1.1 KB

There are no notes for this item.