Default
A neutral outlined square, implying the standard container state. Browser decides automatically based on element.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="14" height="14" rx="1" /></svg>
None
A circle with a slash, symbolizing "hidden" or "not visible" . Element is hidden and removed from layout.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9" /><path d="M5 19L19 5" stroke-width="2" /></svg>
Block
Two stacked, full-width rectangles. Elements start on a new line and take full available width.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="7" rx="1" fill="currentColor" opacity="0.15" /><rect x="3" y="14" width="18" height="7" rx="1" fill="currentColor" opacity="0.15" /><rect x="3" y="3" width="18" height="7" rx="1" /><rect x="3" y="14" width="18" height="7" rx="1" /></svg>
Inline
Three small blocks side-by-side, representing elements that flow horizontally and take width only as needed.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="8" width="5" height="8" rx="0.5" fill="currentColor" opacity="0.15" /><rect x="9" y="8" width="6" height="8" rx="0.5" fill="currentColor" opacity="0.15" /><rect x="16" y="8" width="5" height="8" rx="0.5" fill="currentColor" opacity="0.15" /><rect x="3" y="8" width="5" height="8" rx="0.5" /><rect x="9" y="8" width="6" height="8" rx="0.5" /><rect x="16" y="8" width="5" height="8" rx="0.5" /></svg>
Inline Block
A block with a boundary. It respects dimensions while flowing inline and behaves like a block inside.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="16" height="16" rx="1" /><rect x="8" y="8" width="8" height="8" rx="0.5" fill="currentColor" opacity="0.3" /><rect x="8" y="8" width="8" height="8" rx="0.5" /></svg>
Flex
A large container with aligned bars, indicating a flexible layout that adapts content. Flexible row layout container.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="1" /><rect x="5.5" y="6" width="3" height="12" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="10.5" y="6" width="3" height="12" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="15.5" y="6" width="3" height="12" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="5.5" y="6" width="3" height="12" rx="0.5" /><rect x="10.5" y="6" width="3" height="12" rx="0.5" /><rect x="15.5" y="6" width="3" height="12" rx="0.5" /></svg>
Inline Flex
A smaller, contained flexible layout, showing the flex container itself flows inline . Flex layout but inline-level element.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="7" y="7" width="10" height="10" rx="1" /><rect x="8.5" y="9" width="2" height="6" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="11" y="9" width="2" height="6" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="13.5" y="9" width="2" height="6" rx="0.5" fill="currentColor" opacity="0.4" /><rect x="8.5" y="9" width="2" height="6" rx="0.5" /><rect x="11" y="9" width="2" height="6" rx="0.5" /><rect x="13.5" y="9" width="2" height="6" rx="0.5" /></svg>