0.0.9 • Published 9 months ago
@phase2/outline-grid v0.0.9
outline-grid
The Outline Grid component
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
containerAlign | container-align | "none" \| "left" \| "center" \| "right" | "center" | The horizontal position of the container. |
fullBleed | full-bleed | boolean | false | Whether or not this is a full bleed container. |
gapSize | gap-size | "small" \| "large" \| "medium" \| "none" | "small" | How much of a gap should exist between columns? (This affects both the vertical and horizontal column/row gaps.) |
gapSizeLg | gap-size-lg | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on large+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
gapSizeMd | gap-size-md | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on medium+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
gapSizeSm | gap-size-sm | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on small+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
gapSizeXl | gap-size-xl | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
gapSizeXxl | gap-size-xxl | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on extra extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
gapSizeXxxl | gap-size-xxxl | "small" \| "large" \| "medium" \| "none" | How much of a gap should exist between columns on extra extra extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) | |
xPadding | x-padding | boolean | false | Whether or not this container has left/right padding. |
yPadding | y-padding | boolean | false | Whether or not this container has left/right padding. |
Slots
| Name | Description |
|---|---|
| The default slot for this element. |