Frames

Frames are useful to visually separate an element from its parent. This is common practice to separate an element such as a link block from a parent such as a background. Frames fill the width of their parent element and have padding inside them. The designer can add combo classes such as any pre-set background colour, or a shadow, or a link-hover effect if required.

Implementation tip
It is recommended to create a div element inside the desired frame destination and move the content to be framed inside this new div. Apply the frame class to this new div to frame it. E.g. Parent grid div > framed div > inner content div/elements

Default frames

Regular frame

c-frame

Adjust the frame padding and border radius of the .c-frame class. Use a combo class to define the background colour of the frame when you go to use it (E.g. .c-frame .bg-white)

Edit frame inside


.c-frame

Regular frame with white background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Regular frame with lightest background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Regular frame with primary light background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Regular frame with secondary background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Large frame

c-frame-large

Same properties as the above, Regular frame. Gives option to define a larger frame element.

Edit frame inside


.c-frame-large

Large frame with white background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Large frame with lightest background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Large frame with primary light background

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Link frame

c-frame-link

This frame is to be used on link blocks. Here you can add in an interaction (or hover, pressed state), which will be applied to all components that contain link blocks, (E.g. page links).

Implementation tip
Consider removing default link styling on this class (colour, font weight, text decoration) to body-default to ensure these link elements are presented correctly when this is used.

Variations

Shadow

c-frame

is--with-shadow

c-frame-large

is--with-shadow

To apply a global shadow option to framed elements, edit the global class .is--with-shadow inside the dotted box. The styling will flow onto the frames underneath to give a preview of the style. This class should be used as a combo class on framed classes where the desired outcome is the shadow.

Edit Shadow inside


.is--with-shadow





.is--with-embellishment





.embellishment-frame

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.