City of Ghent Style Guide

Quote

When to use this component

Use the quote component to highlight a short quote or a part of a quote on detail pages. The quote component can also be used to highlight a short statement or conclusion also mentioned in the content of the detail page, like in a traditional news paper article.

When not to use this component

Do not use the quote component for long quotes or text. The quote component works best when using quotes with the length of a tweet, meaning between 140 characters and 280 characters. For long or quotes, use a normal text paragraph.

How it works

The quote component consist of the following required elements:

  • A fixed spot illustration to indicate this is a quote.
  • The text of the short quote itself (or a part of the quote, a short statement, a conclusion,…)
  • The person that said the quote or the source of the quote.

Quote 

<div class="quote-wrapper">
  <div class="quote">
    <blockquote>
      <div class="content">
        <p>
          {{ 'This is a huge quote on lots of lines. Dessert cookie cotton candy. Gummies jelly beans cupcake liquorice carrot cake chocolate bar jelly-o gummies gingerbread.Bonbon marshmallow dragée danish lollipop cheesecake gingerbread.' }}
        </p>
      </div>
      <footer>
        {{ 'Daniel Termont, Mayor Ghent' }}
      </footer>
    </blockquote>
  </div>
</div>
 
<div class="quote-wrapper">
    <div class="quote">
        <blockquote>
            <div class="content">
                <p>
                    This is a huge quote on lots of lines. Dessert cookie cotton candy. Gummies jelly beans cupcake liquorice carrot cake chocolate bar jelly-o gummies gingerbread.Bonbon marshmallow dragée danish lollipop cheesecake gingerbread.
                </p>
            </div>
            <footer>
                Daniel Termont, Mayor Ghent
            </footer>
        </blockquote>
    </div>
</div>
 
{
  "text": "This is a quote text."
}
  • Content: 
    .quote-wrapper {
  overflow: auto;
}

.quote {
  margin: 0;
}

blockquote {
  @include bold-text;

  display: flex;
  position: relative;
  flex-direction: column;
  padding-top: 50px;

  &::before {
    @include spot-image('quote', 2rem);
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;

    @include desktop {
      @include spot-image('quote', 2.75rem);
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    padding: 15px 0 30px;
    line-height: 158.333%;

    @include desktop {
      padding: 30px 0;
    }

    p {
      font-size: 1.2rem;

      &:last-of-type {
        margin: 0;
      }
    }
  }

  footer {
    @include accolade('top', 'left');
    @include large-text;
    @include normal-text;

    line-height: 177.778%;
  }
}
  • URL: /components/raw/quote/_quote.scss
  • Filesystem Path: components/31-molecules/quote/_quote.scss
  • Size: 827 Bytes