View Source

NOTE: Introduced feature in v0.5.0.

All Components have access to the data-contents global HTML attribute via the contents property which removes the Component's bounding box / stylings from the DOM tree.

USAGE: REPL does not support viewport values, resize your Browser to observe this feature.

NOTE: By passing an array, you can set responsive values. e.g. contents={["mobile", "tablet"]}

    import {Box} from "@kahi-ui/framework";

<Box palette="accent" contents={["mobile", "tablet"]}>
    I have no styling on Mobile / Tablet Viewports.

    contents={["desktop", "widescreen"]}
    I have no styling on Desktop / Widescreen



Name Description Types
contents Alters the Component to removes bounding box / stylings from the Component, acting as a blank container for child content.
boolean {VIEWPORT}