Visibility
Control element visibility
Syntax
layout="[visibility-value]"Values
| Value | CSS Output | Description |
|---|---|---|
visible | visibility: visible | Element is visible |
invisible | visibility: hidden | Element is invisible but takes space |
Examples
html
<div layout="invisible">Invisible but present</div>Preview
Visible vs Invisible
layout="invisible" - Invisible elements still take up space
VisibleInvisibleVisible
View Code
html
<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
<span layout="invisible" space="p:small" visual="bg:neutral-300 rounded:small">Invisible</span>
<span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
</div>