CSS Guide

Print

Styled Blockquotes

added the styled blockquote like the brand guide image outlined, and also installed a few media queries to make sure it looks good on mobile as well. See the styled quote here at the top. The unstyled blockquote is directly below it:

==> Styled Quote Sample

Here is how to use it:

  • add the class styled-quote to any blockquote HTML element. It will add the necessary padding and margins and the ‘G’ image on the left.
  • to highlight a quote within the blockquote, surround that text with the HTML elements. this will add an inline light grey bg to the text.
  • to style the name of the quotation author, surround the author’s name with the HTML element. This will make the name text a slightly different color, and make it the brand’s specified serif font;
  • this CANNOT be used on the right side of a page (the styled ‘G’ image will clash with content on the left!), or on anything other than a full-width section on the page. This is styled to look good without a sidebar, or without another column of content next to it. It’s to be treated almost like a ‘Hero’ element at all times.

The code would look like this:

Make sure that you use the proper html tags and classes, to ensure that you get the proper styles.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *