FTSE Russell Styleguide

Quotes 

<div class="ig-row">
    <div class="eight ig-columns offset-by-two">
        <div class="ig-legend">Standard block/pull quote</div>
        <!-- ig-legend -->
        <blockquote class="blockquote">
            <div contenteditable="true">
                <p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>
            </div>
        </blockquote>

        <div class="ig-legend">Reversed block/pull quote</div>
        <!-- ig-legend -->
        <blockquote class="blockquote blockquote--reverse">
            <div contenteditable="true">
                <p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>
            </div>
        </blockquote>

        <div class="ig-legend">Standard block/pull quote with citation</div>
        <!-- ig-legend -->
        <blockquote class="blockquote">
            <div contenteditable="true">
                <p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>
            </div>
            <cite contenteditable="true">Johannes Gensfleisch zur Laden zum Gutenberg</cite>
        </blockquote>
    </div>
    <!-- ig-columns -->
</div>
<!-- ig-row -->

<div class="ig-row">
    <div class="eight ig-columns offset-by-two">
        <div class="ig-legend">Large block/pull quote with citation</div>
        <!-- ig-legend -->
        <blockquote class="blockquote blockquote--large">
            <div contenteditable="true">
                <p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>
            </div>
            <cite contenteditable="true">Johannes Gensfleisch zur Laden zum Gutenberg</cite>
        </blockquote>
    </div>
    <!-- ig-columns -->
</div>
<!-- ig-row -->

<div class="ig-row">
    <div class="eight ig-columns offset-by-two">
        <div class="ig-legend">Small block/pull quote with citation</div>
        <!-- ig-legend -->
        <blockquote class="blockquote blockquote--small">
            <div contenteditable="true">
                <p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>
            </div>
            <cite contenteditable="true">Johannes Gensfleisch zur Laden zum Gutenberg</cite>
        </blockquote>
    </div>
    <!-- ig-columns -->
</div>
<!-- ig-row -->
 
<div class="ig-row">
  <div class="eight ig-columns offset-by-two">
    <div class="ig-legend">Standard block/pull quote</div><!-- ig-legend -->
    <blockquote class="blockquote">
      <div contenteditable="true">{{ content.quotation_one }}</div>
    </blockquote>

    <div class="ig-legend">Reversed block/pull quote</div><!-- ig-legend -->
    <blockquote class="blockquote blockquote--reverse">
      <div contenteditable="true">{{ content.quotation_one }}</div>
    </blockquote>

    <div class="ig-legend">Standard block/pull quote with citation</div><!-- ig-legend -->
    <blockquote class="blockquote">
      <div contenteditable="true">{{ content.quotation_one }}</div>
      <cite contenteditable="true">{{ content.citation }}</cite>
    </blockquote>
  </div><!-- ig-columns -->
</div><!-- ig-row -->

<div class="ig-row">
  <div class="eight ig-columns offset-by-two">
    <div class="ig-legend">Large block/pull quote with citation</div><!-- ig-legend -->
    <blockquote class="blockquote blockquote--large">
      <div contenteditable="true">{{ content.quotation_one }}</div>
      <cite contenteditable="true">{{ content.citation }}</cite>
    </blockquote>
  </div><!-- ig-columns -->
</div><!-- ig-row -->

<div class="ig-row">
  <div class="eight ig-columns offset-by-two">
    <div class="ig-legend">Small block/pull quote with citation</div><!-- ig-legend -->
    <blockquote class="blockquote blockquote--small">
      <div contenteditable="true">{{ content.quotation_one }}</div>
      <cite contenteditable="true">{{ content.citation }}</cite>
    </blockquote>
  </div><!-- ig-columns -->
</div><!-- ig-row -->
 
{
  "content": {
    "quotation_one": "<p>Gutenberg’s father worked with the ecclesiastic mint. He grew up knowing the trade of goldsmithing.</p>",
    "citation": "Johannes Gensfleisch zur Laden zum Gutenberg"
  }
}
  • Content: 
    .blockquote {
  margin : $space-xl 0;

  div {
    padding-left : $space-lg;
    border-left : $border-width-thick solid $border-color;

    & > * {
      font-family : $font-family-secondary;
      font-style : italic;
      font-size: $font-size-base;

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

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

  cite {
    display : block;
    margin-bottom : $space-md;
  }

  /* Smaller than default. */
  &.blockquote--small {

    div > * {
      font-size: $font-size-sm;

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

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

  /* Larger than default. */
  &.blockquote--large {

    div > * {
      font-size: $font-size-lg;

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

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

  /* Align text to right. */
  &.blockquote--reverse {
    text-align : right;

    div {
      padding-right : $space-lg;
      padding-left : 0;
      border-right : $border-width-thick solid $border-color;
      border-left-width : 0;
    }
  }
}

blockquote:not(.blockquote) {
  margin : $space-xl 0;

  & > p {
    border-left : $border-width-thick solid $border-color;
    padding: 0 0 0 $space-lg;
    font-family : $font-family-secondary;
    font-style : italic;
    font-size: $font-size-base;
    line-height: 1.5;

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

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

  /* Smaller than default. */
  &.blockquote--small {

    & > p {
      font-size: $font-size-sm;

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

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

  /* Larger than default. */
  &.blockquote--large {

    & > p {
      font-size: $font-size-lg;

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

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

  /* Align text to right. */
  &.blockquote--reverse {
    text-align : right;

    & > p {
      padding-right : $space-lg;
      padding-left : 0;
      border-right : $border-width-thick solid $border-color;
      border-left-width : 0;
    }
  }
}
  • URL: /components/raw/quotes/_type-quotes.scss
  • Filesystem Path: src/components/atoms/typography/quotes/_type-quotes.scss
  • Size: 2.5 KB

There are no notes for this item.