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 | rowGap | column_gap | columnGap | Type: String | Values: xxs | xs | sm | md | lg | xl | none
Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
Setting the row_gap || rowGap prop creates space between rows in a flex container.
Setting the column_gap || columnGap prop creates space between columns in a flex container.
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
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.
Use <Layout.RoundLabel>, <Layout.Round>, <Layout.Game>, and/or <Layout.Participant> to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.
On mobile devices, <Layout.RoundLabel> will display (on desktop these components are hidden) and the bracket will be in one column.
Ensure that each <Layout.Game> maintains a consistent height for the bracket lines to lay out properly.
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.
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.
An overlay can be added to the background image by setting the imageOverlay prop and adding a backgroundColor. The imageOverlay prop can be set to any opacity ranging from opacity_1 to opacity_10.
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 allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our useCollapsible hook.
NOTE: you must import and declare the useCollapsible hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.
Optionally replace your 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 requires the useCollapsible hook to ensure the collapsible's toggle action works correctly.
When using a custom Main Section, you can also use the optional Collapsible.Icon.
NOTE: The optional icon subcomponent must receive the collapsed state of the collapsible in order to toggle correctly. It also 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.
By default, the overlay is rendered as a gradient. Setting the gradient prop to false renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the opacity prop.
The color prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
NOTE: Images are set to display: block to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.
The optional layout prop accepts the position and size of the overlay as a key:value pair.
The position key accepts bottom (default), top, y (for both top and bottom) right, left, or x (for both left and right), which sets the side(s) where the color overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of bottom starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
The size value is full (100%) by default, but accepts our spacing tokens or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
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 scrollBarNone prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
To enable the overlay to cover the full size of your screen, you can pass the fullScreen prop. You can also pass an opacity along with it.
The fullScreen prop also allows you to use color along with it.
The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
DraggableProvider = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: initialItems (initial data) and onReorder (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
Draggable.Container = This specifies the container within which items can be dropped.
Draggable.Item = This specifies the items that can be dragged and dropped. dragId is a REQUIRED prop for Draggable.Item.
For a simplified version of the Draggable API for the List kit, you can do the following:
Use DraggableProvider and manage state as shown.
The List kit is optimized to work with the draggable kit. To enable drag, use the enableDrag prop on List kit AND dragId prop on ListItem. An additional optional boolean prop (set to true by default) of dragHandle is also available on List kit to show the drag handle icon.
For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
Use DraggableProvider and manage state as shown.
The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the enableDrag prop on SelectableList kit AND dragId prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of dragHandle 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 DraggableProvider and manage state as shown.
Draggable.Container 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 draggableItem and dragId props on the Card kit as shown. An additional optional boolean prop (set to true by default) of dragHandle is also available to show the drag handle icon.
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
DraggableProvider and manage state as shown. draggableContainer prop on the Table.Body to designate it as the Draggable ContainerdraggableItem prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the dragId prop here. We recommending using the default dropZone type with the Table kit.
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.
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 within the dropZone prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "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 type is set to "line", the default color is "primary" and "purple" is the only other option.
When using the "line" style, make sure to set the appropriate direction attribute within the dropZone prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default color for "line" is "primary" and "purple" is the only alternative color option.
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 DraggableProvider/DraggableContainer (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 onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart, and onDrop.
