Use rows and columns to lay out content by specifying equal-widths for all columns
Define x-axis alignment and distribute space for all columns per row. Containers may have set widths or may be flexible with max-widths defined. This applies to all columns with left as the default value.
Define y-axis alignment per row and distribute space across all columns per row. This applies to all columns with stretch as the default value.
Defines gutter size for all columns on a row and maintains gutter size by breakpoint. This applies to all columns. When this value is not set, default sizes are used.
Defines direction for items in a container for all columns of a row. This applies to all columns. Default is horizontal.
Wrapping columns is the default; however, it is possible to disable or enable column wrapping of a row with the ability to set values based on breakpoint. The disable value also invokes overflow scrolling. This applies to all columns.
Controls column width by overriding columns value for a specific column or columns. Span will override values from columns.
Adds empty space (or columns) to left or right of a column, either to the left (offset-left) or right (offset-right). This can be applied to an individual column.
Overrides row-level alignment for a column. This can be applied to an individual column.
Defines nested columns (also known as
To ensure that usage of this component complies with accessibility guidelines:
- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout
- Use list markup for content layout. List markup allow contents to be structured which makes it easier for assistive technologies
This component has compliance with following WCAG guidelines:
- WCAG SC 1.3.2: Meaningful Sequence: Cedar Design System does not provide for Flexbox’s
orderproperty. Reverse order or reordering of items is not allowed. Content must be presented in a correct reading sequence to comply with accessibility standards