# 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.

Image alt text

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.

Image alt text
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.

Last Updated: 8/29/2019, 2:06:05 AM