This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Maintain ratio

Embed media and maintain an aspect ratio across devices

Why?

Embedded media, for example YouTube, videos generally need to keep a specific aspect ratio across a responsive site.

Usage

  • Used for enforcing an aspect ratio for iframes, videos etc
  • use modifiers for different ratios.

SASS docs for maintain ratio

Variants

Basic usage - 16x9

Example

Source


<div class="maintain-ratio maintain-ratio--16-9">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

4x3

Example

Source


<div class="maintain-ratio maintain-ratio--4-3">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

Custom - with BEM element

Use .maintain-ratio__item for custom content:

Example

An example of an image with a ratio of 4:3

Source


<div class="maintain-ratio maintain-ratio--4-3">
    <img class="maintain-ratio__item" src="http://placehold.it/800x600" alt="An example of an image with a ratio of 4:3" />
</div>

Edit on GitHub