Media

Responsive media

Media elements, including img, embed, object, and video are made responsive in HiQ by default. Their max-width is set to 100% of their container width.

Images

img elements are given a border-radius by default. This can be altered with --hiq-image-border-radius.

Property Name (global/local)	Description
--hiq-image-border-radius --image-border-radius	Sets the border radius for img elements.

Figures

Anytime you need to display a piece of content like an image with an optional caption, consider using a <figure>. Some baseline styles are provided for the HTML5 <figure> and <figcaption> elements.

Here is a caption for this image.

<figure>
    <img src="" alt="Image alt text">
    <figcaption>Here is a caption for this image.</figcaption>
</figure>

Property Name (global/local)	Description
--hiq-figcaption-margin-top --figcaption-margin-top	Sets the top margin for figcaptions to separate them from the content of the figure.
--hiq-figcaption-font-weight --figcaption-font-weight	Sets the font weight for figcaptions.
--hiq-figcaption-text-color --figcaption-text-color	Sets the text color for figcaptions.

iFrames

By default, the border around iframes is removed.