Media

Image tag

All <img> elements are responsive friendly, PrimoCSS sets max-width: 100%;, height: auto; and inherits any display properties. To make the <img> full width the utility class can be used .u-width-full.

Example
Image example
<img src="..." alt="...">

Figure and caption

The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples . Styled with border-top and border-bottom to distinguish it from the document flow. Any media elements are centred to the <figure> element. Styles can be found in _elements.media.scss.

Example
A placeholder figure image.
The figcaption element example
<figure>
    <img src="..." alt="...">
    <figcaption>...</figcaption>
</figure>