Layout

Element makes use of media queries to set different layouts, component designs and type styles for 3 different screen sizes. We refer to these as: small, medium, large, and extra large screens.

Layout illustration

 

Breakpoint tokens

GenericToken / Layout
576px
576px
ovo-core-breakpoint-small
Collection
-
Token set
Core
768px
768px
ovo-core-breakpoint-medium
Collection
-
Token set
Core
1200px
1200px
ovo-core-breakpoint-large
Collection
-
Token set
Core
@media screen and (min-width: ovo-core-breakpoint-small)
@media screen and (min-width: ovo-core-breakpoint-small)
ovo-core-media-query-small
Collection
-
Token set
Core
@media screen and (min-width: ovo-core-breakpoint-medium)
@media screen and (min-width: ovo-core-breakpoint-medium)
ovo-core-media-query-medium
Collection
-
Token set
Core
@media screen and (min-width: ovo-core-breakpoint-large)
@media screen and (min-width: ovo-core-breakpoint-large)
ovo-core-media-query-large
Collection
-
Token set
Core

 

Our grid system

To see how we organise our page layout with a grid system, head to our grid component documentation.