Quote component
The quote component is used to isolate and emphasise an important piece of content. Users typically scan website content and so this component can be used to break up text and direct users to certain sections of content.
Quote content should not be too long, but long enough to add value to the page's content.
According to the RNLI's design system, which references a similar component, this type of content should not feature more than twice on one page. If it does, there should be adequate space to give each quote adequate prominence. Barnardo's design system suggests that this component should be limited to one per page.
When quoting an individual / organisation, use caption text to provide context and reference the source of the information.
This is a short quote, with no media.
Quote with media and no caption.
Quote with the full works – media, multiple paragraphs of text, and a caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie viverra enim, at molestie nulla tincidunt eget. Phasellus non vehicula lorem, dapibus placerat enim. Integer egestas, mauris non auctor cursus, eros libero tincidunt nunc, at varius nibh urna non nibh.
Nunc malesuada mauris est, ut eleifend ipsum volutpat nec. Integer pretium condimentum vestibulum. Vivamus vulputate mauris sed elit interdum vestibulum. Nunc tempor sed risus a efficitur. Proin in eleifend massa, sit amet pellentesque felis. Nunc in rutrum augue. Quisque eu aliquam neque, nec fringilla mauris. Proin ornare aliquet elit quis iaculis.