Skip to main content

Aspect ratios

The aspect ratio styles provide some pre-defined common aspect ratio styles for elements.

Included are horizontal and vertical aspect ratios.

Combined imports​

If you will use both the horizontal aspect ratios then you can use the combined import file.

@import 'cacao-css/dist/aspect/combined-import.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/aspect/3xs/combined-import.css';
@import 'cacao-css/dist/aspect/2xs/combined-import.css';
@import 'cacao-css/dist/aspect/xs/combined-import.css';
@import 'cacao-css/dist/aspect/sm/combined-import.css';
@import 'cacao-css/dist/aspect/md/combined-import.css';
@import 'cacao-css/dist/aspect/lg/combined-import.css';
@import 'cacao-css/dist/aspect/xl/combined-import.css';
@import 'cacao-css/dist/aspect/2xl/combined-import.css';
@import 'cacao-css/dist/aspect/3xl/combined-import.css';
@import 'cacao-css/dist/aspect/4xl/combined-import.css';
@import 'cacao-css/dist/aspect/5xl/combined-import.css';