containers and layout (Divider, Card, Sheet)

[YuezhenQin]

Card

[YuezhenQin]

Divider

Dividers are visual indicators used to separate sections of content. Divider is available in three sizes via the size prop:

1. cell: 1px thick. Use to divide individual cells in List items.
2. section: 2px thick. Use between groups of List items.
3. module: 8px thick. Use to group larger clusters of related sections.

<div class="divider"></div>

Cell dividers

Cell dividers are 1 px lines used to define the boundary between list items. All list items have cell dividers even those that are not interactive. Cell dividers begin with the text’s leading edge and end at the right edge of the screen.

.divider {
    border-bottom: 1px solid #E2E2E2
    margin: 2px 0;
}
.medium {
    background-color: black;
    height: 2px;
}
.large {
    background-color: black;
    height: 8px;
}

Section dividers

Section dividers are 2 px lines used when defining the end of one group of list items and the beginning of another. Section dividers fit edge to edge in the container.

[YuezhenQin]

Sheet

Sheets allow users to interact with two surfaces simultaneously.