# Image visiblity classes

- Added more classe to toggle the visiblity of an image between breakpoints, an
example can be found on the AOP - forms-2 page.

## Breakpoints

* mobile-default: 480px
* tablet-default: 720px
* desktop-default: 1140px
* desktop-large: 1300px

## Classes

### u-hide

The hide utility can be used to display the elements based on certain
breakpoints.

**.u-hide@above-mobile-default**
*Hide the element above the mobile-default breakpoint*

**.u-hide@above-tablet-default**
*Hide the element above the tablet-default breakpoint*

**.u-hide@above-desktop-default**
*Hide the element above the desktop-default breakpoint*

**.u-hide@above-desktop-large**
*Hide the element above the desktop-large breakpoint*

**.u-hide@below-mobile-default**
*Hide the element below the mobile-default breakpoint*

**.u-hide@below-tablet-default**
*Hide the element below the tablet-default breakpoint*

**.u-hide@below-desktop-default**
*Hide the element below the desktop-default breakpoint*

**.u-hide@below-desktop-large**
*Hide the element below the desktop-large breakpoint*

### m-visual

The visual component can be used to toggle the behaviour of the image. By
default the image is scaled to fill up the entire container it is place within,
without losing or changing its aspect ratio.

**.m-visual--contained**
*Changes the behaviour of the image to scale until it reaches one of the sides
of its parent container, without losing or changing the aspect ratio. This can
create whitespace around the image because it is not scaled larger than its
parent container.*

**.m-visual--contained\@above-mobile-default**
*Same behaviour as the m-visual--contained, but only applicable above the
mobile-default breakpoint.*

**.m-visual--contained\@above-tablet-default**
*Same behaviour as the m-visual--contained, but only applicable above the
tablet-default breakpoint.*

**.m-visual--contained\@above-desktop-default**
*Same behaviour as the m-visual--contained, but only applicable above the
desktop-default breakpoint.*

**.m-visual--contained\@above-desktop-large**
*Same behaviour as the m-visual--contained, but only applicable above the
desktop-large breakpoint.*

**.m-visual--contained\@below-mobile-default**
*Same behaviour as the m-visual--contained, but only applicable below the
mobile-default breakpoint.*

**.m-visual--contained\@below-tablet-default**
*Same behaviour as the m-visual--contained, but only applicable below the
tablet-default breakpoint.*

**.m-visual--contained\@below-desktop-default**
*Same behaviour as the m-visual--contained, but only applicable below the
desktop-default breakpoint.*

**.m-visual--contained\@below-desktop-large**
*Same behaviour as the m-visual--contained, but only applicable below the
desktop-large breakpoint.*

## Commit details (retroactive)

* Changed/removed `m-visual--contain` in SCSS files `src/scss/general/components/molecules/_visual.scss`.
* Added `m-visual--contained`, `u-hide` in SCSS files `src/scss/general/components/molecules/_visual.scss`, `src/scss/general/utils/_visibility.scss`.
* Added `m-visual--contained` in template files `src/templates/styleguides/general/molecules/visual/visual-page.njk` on page `styleguides/general/molecules/visual/visual-page`.