Tray
Trays are visual containers for boxes, establishing a common spacing and border assembly for boxes contained within
Demo
A leading box with title, e.g.
A follow-up box with body content or instruction
Additional body group content
<s-box> child
<s-box> sibling
Some final, footer content with optional .tray-footer class
API
Tag
| Name | Description |
|---|---|
<s-tray>
|
Custom HTML tag, accepts content |
Classes
| Name | Description |
|---|---|
s-tray > s-box.tray-footer
|
Applied only to |
Demo
API
Tag
| Name |
<STray>
|
Classes
| Name | Description |
|---|---|
STray > SBox.tray-footer
|
Applied only to |
Skylab React links
Guidelines
Layout
By design, the <s-tray> imposes no padding or margin. Space around the container can be managed by applying a util class.
<s-tray> is intended to have multiple <s-box> elements as direct descendants. These <s-box> descendants inherit all styles applied to standard <s-box>, with the exception of sibling margins applied to s-box + s-box, which is removed within the tray.
<s-box> borders are consolidated within the tray to appear as a contiguous group. Bottom border width and radius are reset to zero for all <s-box> elements, except the final of a set, where only top border radius is removed.
Restrictions
<s-box> variations are achieved by way of general sibling selectors. Some client frameworks will encapsulate the child <s-box> in template tags by default, and break the sibling composition. Developers should take special care in template construction to retain the appropriate sibling structure.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com