Display "display" styles

The display styles handle the display CSS property styles. There is also a visually-hidden class for hidding an element in an accessible way.

Each display base class has a class to go with each of the media query viewport sizes. For example:

hidden-3xs
hidden-2xs
hidden-xs
hidden-sm
hidden-md
hidden-lg
hidden-xl
hidden-1xl
hidden-3xl
hidden-4xl
hidden-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/display/display.css';

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

display/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

3xs styles

display/3xs/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-3xs) {
    .flex-3xs {
        display: flex !important;
    }

    .inline-flex-3xs {
        display: inline-flex !important;
    }

    .block-3xs {
        display: block !important;
    }

    .inline-3xs {
        display: inline !important;
    }

    .inline-block-3xs {
        display: inline-block !important;
    }

    .hidden-3xs {
        display: none !important;
    }

    .visually-hidden-3xs {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

2xs styles

display/2xs/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-2xs) {
    .flex-2xs {
        display: flex !important;
    }

    .inline-flex-2xs {
        display: inline-flex !important;
    }

    .block-2xs {
        display: block !important;
    }

    .inline-2xs {
        display: inline !important;
    }

    .inline-block-2xs {
        display: inline-block !important;
    }

    .hidden-2xs {
        display: none !important;
    }

    .visually-hidden-2xs {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

xs styles

display/xs/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-xs) {
    .flex-xs {
        display: flex !important;
    }

    .inline-flex-xs {
        display: inline-flex !important;
    }

    .block-xs {
        display: block !important;
    }

    .inline-xs {
        display: inline !important;
    }

    .inline-block-xs {
        display: inline-block !important;
    }

    .hidden-xs {
        display: none !important;
    }

    .visually-hidden-xs {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

sm styles

display/sm/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-sm) {
    .flex-sm {
        display: flex !important;
    }

    .inline-flex-sm {
        display: inline-flex !important;
    }

    .block-sm {
        display: block !important;
    }

    .inline-sm {
        display: inline !important;
    }

    .inline-block-sm {
        display: inline-block !important;
    }

    .hidden-sm {
        display: none !important;
    }

    .visually-hidden-sm {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

md styles

display/md/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-md) {
    .flex-md {
        display: flex !important;
    }

    .inline-flex-md {
        display: inline-flex !important;
    }

    .block-md {
        display: block !important;
    }

    .inline-md {
        display: inline !important;
    }

    .inline-block-md {
        display: inline-block !important;
    }

    .hidden-md {
        display: none !important;
    }

    .visually-hidden-md {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

lg styles

display/lg/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-lg) {
    .flex-lg {
        display: flex !important;
    }

    .inline-flex-lg {
        display: inline-flex !important;
    }

    .block-lg {
        display: block !important;
    }

    .inline-lg {
        display: inline !important;
    }

    .inline-block-lg {
        display: inline-block !important;
    }

    .hidden-lg {
        display: none !important;
    }

    .visually-hidden-lg {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

xl styles

display/xl/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-xl) {
    .flex-xl {
        display: flex !important;
    }

    .inline-flex-xl {
        display: inline-flex !important;
    }

    .block-xl {
        display: block !important;
    }

    .inline-xl {
        display: inline !important;
    }

    .inline-block-xl {
        display: inline-block !important;
    }

    .hidden-xl {
        display: none !important;
    }

    .visually-hidden-xl {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

2xl styles

display/2xl/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-2xl) {
    .flex-2xl {
        display: flex !important;
    }

    .inline-flex-2xl {
        display: inline-flex !important;
    }

    .block-2xl {
        display: block !important;
    }

    .inline-2xl {
        display: inline !important;
    }

    .inline-block-2xl {
        display: inline-block !important;
    }

    .hidden-2xl {
        display: none !important;
    }

    .visually-hidden-2xl {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

3xl styles

display/3xl/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-3xl) {
    .flex-3xl {
        display: flex !important;
    }

    .inline-flex-3xl {
        display: inline-flex !important;
    }

    .block-3xl {
        display: block !important;
    }

    .inline-3xl {
        display: inline !important;
    }

    .inline-block-3xl {
        display: inline-block !important;
    }

    .hidden-3xl {
        display: none !important;
    }

    .visually-hidden-3xl {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

4xl styles

display/4xl/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-4xl) {
    .flex-4xl {
        display: flex !important;
    }

    .inline-flex-4xl {
        display: inline-flex !important;
    }

    .block-4xl {
        display: block !important;
    }

    .inline-4xl {
        display: inline !important;
    }

    .inline-block-4xl {
        display: inline-block !important;
    }

    .hidden-4xl {
        display: none !important;
    }

    .visually-hidden-4xl {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

5xl styles

display/5xl/display.css
/* =========================================================================== *\
    Display utilities

    !important is used to ensure that the utility classes take precedence over
    any other styles that might be applied to the elements. This is one of the
    rare cases where we use !important. Use the media query
    versions if you only need things to be displayed a certain way at a certain
    breakpoints.
\* =========================================================================== */

@media (--m-5xl) {
    .flex-5xl {
        display: flex !important;
    }

    .inline-flex-5xl {
        display: inline-flex !important;
    }

    .block-5xl {
        display: block !important;
    }

    .inline-5xl {
        display: inline !important;
    }

    .inline-block-5xl {
        display: inline-block !important;
    }

    .hidden-5xl {
        display: none !important;
    }

    .visually-hidden-5xl {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
}

How to import into your CSS​

Source CSS​

Default styles​

3xs styles​

2xs styles​

xs styles​

sm styles​

md styles​

lg styles​

xl styles​

2xl styles​

3xl styles​

4xl styles​

5xl styles​