Components
Action tile
Action tile
A brand-filled vertical action tile — a stacked icon-over-label link used in grids, such as the “Get a quote… Buying / Selling / Both” picker on the brochure home page. The tile styling lives in the component; the host supplies the icon and label.
Canonical
One brand-filled tile: an icon over a short label, linking to an action. Designed to sit in a row of two to four.
In a grid
typical use
The home-page quote picker: three tiles in an even grid. Each is a full link with its own href.
Props
1 attribute + slot| Attribute | Values | Notes |
|---|---|---|
| koala-action-tile | (marker) | Applied to an <a>. Use the element's own href for the destination. |
| (slot) | markup | Stacked content — typically a <koala-icon> (or <koala-type-icon>) above a short label span. |
Do & don't
Do
Short, parallel labels and one clear icon each. Keep them the same size in an even grid.
Don't
Don't use a long sentence as the label. The tile is a compact choice, not a paragraph — use
<koala-btn> for prose CTAs.