Description
- This pattern uses the wrapping functionality from the Layout component (flexbox CSS model) to achieve responsive designs by arranging customizable blocks within flexible containers.
- The following examples use the Tile component as the container.
Anatomy
Anatomy
Size
Flexible layout can be consumed in any size. However, we currently recommend using the default medium option (Size M). There are specifications for small (Size S) and large (Size L) sizes included here for reference.
Padding and spacing - Size M (default)
Padding and spacing - Size S
Padding and spacing - Size L
Content
- Each block is essentially a wrapper for content—specifically values, properties and status information.
- This content should match the behaviour of its parent block (flexible, fixed, or content huggable) so that it flows responsively across a range of viewport widths.
Content flow
Examples
Layout examples
The blocks and their layout within parent flex containers come with a range of options including their width, alignment, and padding. See the Layout component for more information.
Block alignment within a flex container (with example content)
Dividing lines (with example content)
Content examples
- The blocks within a flexible container can support all kinds of components, but for consistency we recommend adhering to the pre-defined patterns in the examples provided.
- Note that property labels are displayed with values to give context in any layout configuration, from mobile device screens to large desktops viewports.
Label and short values
Label and long values
Label and links
Label and pills
Buttons
Dropdown list (with label above)
Dropdown list (with inline label)
Profile
Checkbox (with hidden label)
Checkbox and label
Single icon (with Alt label)
Combo
Missing values
- If a property has no value, display both the property label and add a hyphen (-) in place of the missing value to represent its absence.
- Displaying the label and adding the hyphen maintains a consistent layout, helping the user to locate properties by their position within the flex container.
Missing values (with example content)
Best practices
- Consider using this pattern when listing items with non-comparative properties.
- Where possible, use flexible width blocks for a more visually responsive experience.
- Include a property label with the property value in the same block.
- Leave a vertical gap between each flexible layout - the current default is 8 pixels.
- Don't overload the content within a block with large or too many components.
- Use this pattern to display a list of the items with the same properties and statuses.
- Consider aligning content to the right within the right-most block.
- Consider using the left most block for an item name or identifier property.
- Where possible, use small (size S) buttons and inputs within this pattern.