Blockquote

/../hex-core/src/core/_quotations.scss

Blockquotes can be combined with anchors to display a complete quote. The rel property of the anchor must be equal to "author". You can check the following link for more information.

The quotation will inherit the width from the parent container. We recommend to use it inside a small container .container.container-small for display purposes, but it will work anywhere.

You can add modifiers to change the color of the left border:

  • .action
  • .accent
  • .brand
Great day at my first Linux Foundation board meeting, but looking forward to seeing everyone at #awsreinvent. On my way!
See you there!
Great day at my first Linux Foundation board meeting, but looking forward to seeing everyone at #awsreinvent. On my way!
See you there!
Great day at my first Linux Foundation board meeting, but looking forward to seeing everyone at #awsreinvent. On my way!
See you there!
<div class="container container-small">
  <blockquote cite="https://twitter.com/ericabrescia/status/803775698297036801">
    Great day at my first Linux Foundation board meeting, but looking forward to seeing
    everyone at #awsreinvent. On my way!
    </br>
    See you there!
    <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
  </blockquote>
  <blockquote class="accent" cite="https://twitter.com/ericabrescia/status/803775698297036801">
    Great day at my first Linux Foundation board meeting, but looking forward to seeing
    everyone at #awsreinvent. On my way!
    </br>
    See you there!
    <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
  </blockquote>
  <blockquote class="brand" cite="https://twitter.com/ericabrescia/status/803775698297036801">
    Great day at my first Linux Foundation board meeting, but looking forward to seeing
    everyone at #awsreinvent. On my way!
    </br>
    See you there!
    <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
  </blockquote>
</div>

Outstanding blockquote

/../hex-core/src/core/_quotations.scss

Add more visibility for the blockquote. This style includes a big quotes on both sides of the quote. Thsi is convenient to highlight a quote or for marketing sites.

You can combine it with the carousel component.

Great day at my first Linux Foundation board meeting, but looking forward to seeing everyone at #awsreinvent. On my way!
See you there!
<div class="container container-small">
  <blockquote class="outstanding" cite="https://twitter.com/ericabrescia/status/803775698297036801">
    Great day at my first Linux Foundation board meeting, but looking forward to seeing
    everyone at #awsreinvent. On my way!
    </br>
    See you there!
    <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
  </blockquote>
</div>

Abbreviation

/../hex-core/src/core/_quotations.scss

abbr tags are useful to show more information about an abbreviation.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
<abbr title="Structured Query Language">SQL</abbr> database (MariaDB) to get developers
productive immediately - with all the most common tools ready to go.

Cite

/../hex-core/src/core/_quotations.scss
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
<abbr title="Structured Query Language">SQL</abbr> database (MariaDB) to get developers
productive immediately - with all the most common tools ready to go.