inline | Type: Boolean
By default this prop is false which sets the flex container to take up the full width of its parent container. When the prop is set to true the flex container sets its width to be the same size as the containing items.
reverse | Type: Boolean
When set to true this prop will reverse the order of items in the flex container.
wrap | Type: Boolean
When set to true this prop will move the next item in flex container to a new line if there is no more room.
gap | row_gap | column_gap | Type: String | Hash | Values: xxs | xs | sm | md | lg | xl | none
Setting the gap prop sets the row_gap and the column_gap props to the same size and creates equal space within a flex container.
Setting the row_gap prop creates space between rows in a flex container.
Setting the column_gap prop creates space between columns in a flex container.
You can also set responsive values by passing a hash with device sizes and values.
display_flex | Type: Booleanflex | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12fixed_size | Type: String | Values: Any CSS px or % valuegrow | Type: Booleanshrink | Type: Booleanorder | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
Flex is a short hand to set the flex item to take up (x) amount of available space
Setting Flex to 1 is equal to setting the grow & shrink prop to true
Setting Flex to 0 is equal to setting the grow & shrink prop to false
If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
display_flex will either be true or false. If true, then the class will be applied to the kit
Layout can leverage the max-width property. Learn more in our visual guidelines.
The left element on Collection Detail can be used for things such as navigation or secondary content to the element on the right. The right content can be used the same way that you would use Collection. The element on the right should be the primary focus and can be used for repeating elements such as cards.
Add a background color by passing the color name to background. List of all colors can be viewed here under Product Colors and Status: Subtle Variations.
Card highlight can pass status, product, and category colors. List of all colors can be viewed here.
Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed here.
Remove card border only for dashboard cards.
border_radius_md is the card kit default
To guarantee the vertical section separator displays properly, please add the vertical: "stretch"/vertical="stretch" property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.
Pass anything (including any of our kits) to the children prop to customize a separator's content.
NOTE: passing children overrides any content passed to text
Pass "primary" to the color prop to change any section separator color.
NOTE: Passing children overrides any content provided via the text prop. The color prop does not affect the text prop's color, and the color of children is determined by the children's individual props. For greater control over text color customization, consider using a separator with children.
By default, the Background kit sets background color to 'light' as seen here.
To add a lazyload on the background image simply use the transition prop and one of the three string options "fade", "blur", or "scale".
Status colors can be passed into the background kit. success, success_secondary, warning, warning_secondary, error, error_secondary, info, info_secondary, neutral, neutral_secondary, primary, and primary_secondary
Status Subtle colors can be passed into the background kit. success_subtle, warning_subtle,error_subtle, info_subtle and neutral_subtle
Category colors can be passed into the background kit. Values category_1 to category_21 are accepted. List of all category and status colors can be viewed here.
Background size can be passed into the background kit. Values auto, cover, and contain are accepted.
💡 Note: When using contain you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass no-repeat to the backgroundRepeat prop.
This kit uses icon sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:
lg xs sm 1x 2x 3x 4x 5x 6x 7x 8x 9x 10xThis kit uses default color by default, and can be replaced with colors below:
light lighter success error linkThe icon prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). icon also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.
The collapsed prop (boolean; default = true) handles the collapsed state of a collapsible. Set it to 'false' and the collapsible will render in an expanded state on page load.
You can also control the collapsed state using an external control (like a button). To do this, you must first apply a unique id to the collapsible/collapsible_content child element. You can then attach an eventListner to the external control of your choice, pass it the id as an argument and use document.dispatchEvent(new CustomEvent(id)) to trigger the action. See the code example below for details.
The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action.
Optionally replace your collapsible/collapsible_main with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
NOTE: Custom main sections require data: {"collapsible-main": "true"} to ensure the collapsible's toggle action works correctly.
When using a custom Main Section, you can also use the optional collapsible/collapsible_icon subcomponent.
NOTE: The optional icon subcomponent accepts all icon-related props (icon, size, and color) for further customization. If none of these are specified, the default icon will be rendered.
Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.
Optionally, you can pass multi-directional options (x or y) to the position key, which creates multiple overlays.
Your color is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the size value you set.
NOTE: Multi-directional overlays share the available container space, so passing full or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.
Pass the dynamic prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.
Pass the scroll_bar_none prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
The draggable kit gives you a full subcomponent structure that allows it to be used with almost any kit.
initial_items is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
draggable/draggable_container = This specifies the container within which items can be dropped.
draggable/draggable_item = This specifies the items that can be dragged and dropped. drag_id is a REQUIRED prop for draggable_item and must match the id on the items within initial_items.
For a simplified version of the Draggable API for the List kit, you can do the following:
The List kit is optimized to work with the draggable kit. To enable drag, use the enable_drag prop on List kit with an array of the included items AND drag_id prop on ListItems. You will also need to include the items prop containing your array of listed items for the Draggable API.
An additional optional boolean prop (set to true by default) of drag_handle is also available on ListItem kit to show the drag handle icon.
For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the enable_drag prop on SelectableList kit AND drag_id prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of drag_handle is also available on SelectableList kit to show the drag handle icon.
For a simplified version of the Draggable API for the Card kit, you can do the following:
Use the draggable kit and manage state as shown.
draggable/draggable_container kit creates the container within which the cards can be dragged and dropped.
The Card kit is optimized to work with the draggable kit. To enable drag, use the draggable_item and drag_id props on the Card kit as shown. An additional optional boolean prop (set to true by default) of drag_handle is also available to show the drag handle icon.
| id | name | task number |
|---|---|---|
| 1 |
Terry Miles
| Task 1 |
| 2 |
Sophia Miles
| Task 2 |
| 3 |
Alice Jones
| Task 3 |
| 4 |
Mike James
| Task 4 |
| 5 |
James Guy
| Task 5 |
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
draggable_container prop on the table/table_body to designate it as the Draggable Containerdraggable_item prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the drag_id prop here. The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
When using the "line" type, make sure to set the appropriate direction attribute on the draggable/draggable_container component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the Draggable Drop Zones Line doc example.
The default color for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
When using the "line" style, make sure to set the appropriate direction attribute within the drop_zone_direction prop on the draggable/draggable_container component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the drop_zone_line_color prop on the draggable/draggable_item component to "primary" or "purple".
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
Additionally, if the parent container of the draggable/draggable/draggable_container (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the Draggable Drop Zones doc example does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
You can add drag event listeners for drag, dragend, dragenter, dragleave, dragover, dragstart, and drop.
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
