R A D I U S

Responsive image

Description

Helper class that allows for the simple treatment of images across multiple devices and resolutions.

The class should be used directly on an img element.

There are 3 types of image/illustrations based on the maximum width they're allowed to reach at different breakpoints (the breakpoints have been agreed on by the design team):

u-responsive-img-small
u-responsive-img-medium
u-responsive-img-large

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

u-responsive-img-medium

Magna veniam do aliquip dolore excepteur irure adipisicing qui non eu ipsum. Id cillum aute duis et consequat incididunt magna esse.

Magna veniam do cillum eiusmod aliquip dolore adipisicing qui non eu ipsum. Id cillum aute duis et consequat incididunt magna esse.

u-responsive-img-large

Commodo ad occaecat ex minim. Nisi sunt dolore ut qui incididunt adipisicing in amet laborum eiusmod nostrud elit duis. Nulla aliquip aute nulla fugiat aliqua eiusmod excepteur excepteur dolor incididunt sint. Officia cupidatat labore ex culpa consectetur ullamco nisi laborum. Aute consequat velit reprehenderit occaecat.

Officia cupidatat labore ex culpa consectetur ullamco nisi laborum. Aute consequat velit reprehenderit occaecat.

Officia cupidatat labore ex culpa consectetur ullamco nisi laborum. Aute consequat velit reprehenderit occaecat.

u-responsive-img-small

Magna veniam do aliquip dolore excepteur irure adipisicing qui non eu ipsum.

Magna veniam do cillum eiusmod aliquip dolore adipisicing qui non eu ipsum.

Magna veniam do cillum eiusmod aliquip dolore excepteur irure adipisicing ipsum.