Aeroporto di Bologna - Design System

Blockquote 

<blockquote class="c-blockquote ">
    <p>
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium oloremque laudantium, totam rem.
    </p>

    <footer>
        <cite>Mario Rossi</cite>
    </footer>

</blockquote>
 
<blockquote class="c-blockquote {{ modifier }}">
  <p>
    {{{ quote-text }}}
  </p>

  {{#if cite}}
  <footer>
    <cite>{{{ cite }}}</cite>
  </footer>
  {{/if}}

</blockquote>
 
{
  "quote-text": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium oloremque laudantium, totam rem.",
  "cite": "Mario Rossi"
}
  • Content: 
    .c-blockquote {
  color: primary(night, 100);
  position: relative;

  &:before {
    content: '';
    position: absolute;
    background-image: url('../images/svgs/ic_two-quotes.svg');
    width: remify(24px);
    display: inline-block;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
  }

}

.c-blockquote p {
  font-size: 125%;
  line-height: 1.4;
  padding-left: remify(32px);
}

.c-blockquote footer {
  text-align: right;
  margin-top: remify(16px);
}

.c-blockquote cite {
  font-weight: fw(bold);
  font-style: normal;
}
  • URL: /components/raw/blockquote/_blockquote.scss
  • Filesystem Path: src/views/01-atoms/blockquote/_blockquote.scss
  • Size: 599 Bytes

No notes defined.