Grid
Quilt uses a grid layout as the foundation for all page and component structure. The grid comprises of 12 columns across 6 different break points: Desktop HD, Desktop, Tablet, Mobile Large, Mobile Medium, and Mobile Small.
The Lattice component represents the topmost element in the design system, like the html or body tag. In most cases, there will only be one instance defined.
Lattice PropertiesName | Description | Type | Required | Default |
|---|
children | Grid content. | node | false | null |
hideOverflow | Hides overlay content larger than the grid if true. | boolean | false | false |
className | List of classes for this element. | string | array | false | "" |
style | Inline styles for this element. | object | array | false | null |
The LatticeGrid component represents all media blocks, groups and carousels. If the Lattice component were like a deck of cards, the LatticeGrid component would be an individual card in the deck.
LatticeGrid PropertiesName | Description | Type | Required | Default |
|---|
children | Grid content. | node | false | null |
className | List of classes for this element. | string | array | false | "" |
fullGrid | Uses full width inner grid if true. | boolean | false | false |
fullWidth | Uses full width grid wrapper if true. | boolean | false | false |
innerGrid | Uses inner grid if true. | boolean | false | false |
fullLeft | Starts grid at the left of the screen if true. | boolean | false | false |
fullRight | Ends grid at the right of the screen if true. | boolean | false | false |
overlay | Displays full screen overlay if true. | boolean | false | false |
useGutters | Uses gutters as grid columns if true. | boolean | false | false |
tag | HTML element to use for grid. | string | false | "div" |
style | Styles defined for grid. | object | false | {} |
forwardRef | Ref to component or DOM element. | function | object | false | null |
forwardRef sub propertiesName | Description | Type | Required | Default |
|---|
current | DOM node of Ref object | any | false | null | |
onAnimationStart | Handler for animation start event. | function | false | null |
onAnimationEnd | Handler for animation end event. | function | false | null |
onClick | Handler for click event. | function | false | null |
onKeyPress | Handler for key press event. | function | false | null |
onTouchStart | Handler for touch start event. | function | false | null |
onMouseDown | Handler for mouse down event. | function | false | null |
title | Accessibility title for grid. | string | false | null |
id | Unique identifier for grid. | string | false | null |
role | Accessibility role for grid. | string | false | null |