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:
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.
Leave a Reply
Want to join the discussion?Feel free to contribute!