LayoutItem
<caos-layout-item>
one column of a layout, sized in twelfths of the row and resized at each named breakpoint
May be placed on a record page, an app’s home page and a page inside an app.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
size |
size, markup only |
How many twelfths of the row the item takes at every width, from 1 to 12. Absent, the item is as wide as what it holds. | number | none declared | Optional |
smallSize |
small-size, markup only |
The twelfths the item takes from the small breakpoint (520px) up, until a larger size takes over. | number | none declared | Optional |
mediumSize |
medium-size, markup only |
The twelfths the item takes from the medium breakpoint (720px) up, until a large size takes over. | number | none declared | Optional |
largeSize |
large-size, markup only |
The twelfths the item takes from the large breakpoint (1200px) up. | number | none declared | Optional |
flexibility |
flexibility, markup only |
How the item shares the row: auto grows and shrinks to fill it, grow and shrink do one of the two, no-grow and no-shrink refuse one, and no-flex refuses both. auto and grow let the item grow past its size. | text — one of auto, grow, shrink, no-grow, no-shrink, no-flex | none declared | Optional |
padding |
padding, markup only |
Space between the item’s edge and what it holds, on its two sides or all the way round. | text — one of horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large | none declared | Optional |
alignmentBump |
alignment-bump, markup only |
Pushes the item away from one edge: start sends it to the end of the row, end holds the items after it at the end, and top and bottom do the same across the row. | text — one of start, end, top, bottom | none declared | Optional |
Events
Section titled “Events”Not documented yet — this piece has not said.
| Name | What goes in it |
|---|---|
| the default slot | Whatever the column holds — any placed piece, including another Layout to split the column again. |
Styling hooks
Section titled “Styling hooks”| Design token | What it controls |
|---|---|
--caos-space-2 |
The small padding. |
--caos-space-3 |
The medium padding. |
--caos-space-4 |
The large padding. |
Methods
Section titled “Methods”Not documented yet — this piece has not said.
Readable state
Section titled “Readable state”Not documented yet — this piece has not said.
Styling parts
Section titled “Styling parts”| Part | Which piece of it | When it is there |
|---|---|---|
::part(item) |
The column’s box, inside the item’s padding. | Always |
When to use it
Section titled “When to use it”Every column of a Layout is one of these. It has no job outside a Layout.
What to use instead
Section titled “What to use instead”- Layout — You are deciding how the columns share the row — alignment along it or across it — rather than how wide one column is.
Accessibility
Section titled “Accessibility”An item adds no role: it is a column’s width, not a region, so a screen reader hears only what it holds. Sizes never reorder anything; items are read in the order they were placed at every width.
Examples
Section titled “Examples”As wide as what it holds
Section titled “As wide as what it holds”Items with no size and no flexibility, each taking just the width of its own content.
{ "id": "example", "section": "As wide as what it holds", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Short" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "A little longer" ] } ] } ] } ]}<caos-layout> <caos-layout-item> <caos-tag>Short</caos-tag> </caos-layout-item> <caos-layout-item> <caos-tag>A little longer</caos-tag> </caos-layout-item></caos-layout>Filling the row
Section titled “Filling the row”Items set to auto, growing to share the whole row between them.
{ "id": "example", "section": "Filling the row", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "flexibility": "auto" }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Grows" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "flexibility": "auto" }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Grows too" ] } ] } ] } ]}<caos-layout> <caos-layout-item flexibility="auto"> <caos-tag>Grows</caos-tag> </caos-layout-item> <caos-layout-item flexibility="auto"> <caos-tag>Grows too</caos-tag> </caos-layout-item></caos-layout>One column takes the rest
Section titled “One column takes the rest”A fixed column that refuses to grow beside an auto column that takes whatever remains.
{ "id": "example", "section": "One column takes the rest", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "flexibility": "no-grow" }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Stays narrow" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "flexibility": "auto" }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Takes the rest" ] } ] } ] } ]}<caos-layout> <caos-layout-item flexibility="no-grow"> <caos-tag>Stays narrow</caos-tag> </caos-layout-item> <caos-layout-item flexibility="auto"> <caos-tag>Takes the rest</caos-tag> </caos-layout-item></caos-layout>Sized in twelfths
Section titled “Sized in twelfths”Three items at a quarter, a half and a quarter of the row.
{ "id": "example", "section": "Sized in twelfths", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "3 of 12" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 6 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "6 of 12" ] } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "3 of 12" ] } ] } ] } ]}<caos-layout> <caos-layout-item size="3"> <caos-tag>3 of 12</caos-tag> </caos-layout-item> <caos-layout-item size="6"> <caos-tag>6 of 12</caos-tag> </caos-layout-item> <caos-layout-item size="3"> <caos-tag>3 of 12</caos-tag> </caos-layout-item></caos-layout>A size for each breakpoint
Section titled “A size for each breakpoint”Full width on a phone, half from the small breakpoint, a third from medium and a quarter from large.
{ "id": "example", "section": "A size for each breakpoint", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 12, "small_size": 6, "medium_size": 4, "large_size": 3 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Item 1" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 12, "small_size": 6, "medium_size": 4, "large_size": 3 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Item 2" ] } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "size": 12, "small_size": 6, "medium_size": 4, "large_size": 3 }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Item 3" ] } ] }, { "id": "layout_item_8", "type": "component", "key": "layout_item", "inputs": { "size": 12, "small_size": 6, "medium_size": 4, "large_size": 3 }, "children": [ { "id": "tag_9", "type": "component", "key": "tag", "children": [ "Item 4" ] } ] } ] } ]}<caos-layout> <caos-layout-item size="12" small-size="6" medium-size="4" large-size="3"> <caos-tag>Item 1</caos-tag> </caos-layout-item> <caos-layout-item size="12" small-size="6" medium-size="4" large-size="3"> <caos-tag>Item 2</caos-tag> </caos-layout-item> <caos-layout-item size="12" small-size="6" medium-size="4" large-size="3"> <caos-tag>Item 3</caos-tag> </caos-layout-item> <caos-layout-item size="12" small-size="6" medium-size="4" large-size="3"> <caos-tag>Item 4</caos-tag> </caos-layout-item></caos-layout>Side by side from medium up
Section titled “Side by side from medium up”Two items that stack below the medium breakpoint and stand side by side at half width above it.
{ "id": "example", "section": "Side by side from medium up", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 12, "medium_size": 6 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Left from medium up" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 12, "medium_size": 6 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Right from medium up" ] } ] } ] } ]}<caos-layout> <caos-layout-item size="12" medium-size="6"> <caos-tag>Left from medium up</caos-tag> </caos-layout-item> <caos-layout-item size="12" medium-size="6"> <caos-tag>Right from medium up</caos-tag> </caos-layout-item></caos-layout>Padded sides
Section titled “Padded sides”Items inset from their neighbours by padding on their two sides.
{ "id": "example", "section": "Padded sides", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 6, "padding": "horizontal-medium" }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Padded" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 6, "padding": "horizontal-medium" }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Padded" ] } ] } ] } ]}<caos-layout> <caos-layout-item size="6" padding="horizontal-medium"> <caos-tag>Padded</caos-tag> </caos-layout-item> <caos-layout-item size="6" padding="horizontal-medium"> <caos-tag>Padded</caos-tag> </caos-layout-item></caos-layout>Pushed to the end
Section titled “Pushed to the end”One item bumped from its start edge, so it sits at the far end while the others stay at the start.
{ "id": "example", "section": "Pushed to the end", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Start" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Also start" ] } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "alignment_bump": "start" }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Pushed to the end" ] } ] } ] } ]}<caos-layout> <caos-layout-item> <caos-tag>Start</caos-tag> </caos-layout-item> <caos-layout-item> <caos-tag>Also start</caos-tag> </caos-layout-item> <caos-layout-item alignment-bump="start"> <caos-tag>Pushed to the end</caos-tag> </caos-layout-item></caos-layout>