Blockquotes
The blockquote element represents a section that is quoted from another source. Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.
As with other modules in the Delta Design System, we separate the function of a blockquote from the presentation of a blockquote. In other words, don’t think of blockquotes only in terms of their style, but also what they represent in the absence of style.
Searching the internet, there are many different ways to mark-up blockquotes. The Delta Design System mostly adheres to the approach illustrated by MDN web docs:
- We add a
<cite>to the opening<blockquote>tag. - We use
<p>tags inside the<blockquote>tag. - We do not, however, use a
<footer>tag in our blockquote.
<blockquote> elements are left-aligned by default, but you can add a .center or .right class to change the horizontal alignment to suit your needs.
Blockquote Example
Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences.
<blockquote cite="https://alistapart.com/article/responsive-web-design/">
<p>Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences.</p>
<p><cite><a href="https://alistapart.com/article/responsive-web-design/" target="_blank">Ethan Marcotte, Responsive Web Design</a></cite></p>
</blockquote>