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"]}
<script>
import {Box} from "@kahi-ui/framework";
</script>
<Box palette="accent" contents={["mobile", "tablet"]}>
I have no styling on Mobile / Tablet Viewports.
</Box>
<Box
palette="affirmative"
contents={["desktop", "widescreen"]}
>
I have no styling on Desktop / Widescreen
Viewports.
</Box>