Card sequence
The card sequence was designed to facilitate control of layout components for a responsive UI. You can use just one layout and add as many cards as necessary to display data on a web page. Depending on the size of the portal user’s viewport, all data may be displayed across the page, or one or more cards may drop to the next line until all data is displayed.
How it works
At runtime, each card in a card sequence is rendered next to the previous card, from left to right, until a card does not fit inside the parent container’s width. That card is rendered below. This is repeated until the remainder of the cards fit inside the parent container, or the last line contains only one card.
By default, cards are left aligned inside the parent container. The alignment of the cards is based on the alignment style of the container. This can be changed through scripting. See Card stacks and card sequences.
If minimum and maximum widths are defined on a card in the sequence, the card cannot become narrower or wider than the defined widths. A card cannot become narrower than the maximum of the minimum width and the sum of non-expanding columns. If a minimum width is not defined, the minimum is zero.
If there is at least one expanding column on a card in the sequence, the card sequence expands to fill the width of the parent container, unless a card’s maximum width is limiting.
These are additional characteristics of a card sequence:
- There is no extra space rendered between cards in a card sequence, either horizontally or vertically.
- Like for card stacks, card sequence styles are applied to the parent container, which is the region or embedded region.
- If the width of the parent container is not occupied by a card, the background of the parent container is visible.
Restrictions
The current design uses a left-to-right layout of the cards in the card sequence, where cards to the right can break to the next line if they do not fit into the parent container. A right-to-left layout, where cards to the left can break to the next line, has not been implemented.
Also, when a card sequence is rendered for email, it is rendered in the same way as for a browser, except that each card has a static width. Expanding width columns are not supported when rendering for email. Like in a browser, if a card does not fit inside the container, it will break onto the next line. The alignment of the cards is based on the alignment style of the container.
Examples
The card sequence container width that exists in addition to the sum of the cards’ non-expanding column widths is the “flexible” width. The sum of the cards’ expanding column widths is the expanding “weight” for the cards.
The flexible width is distributed among the cards according to the expanding weight for each card, as shown in these examples:
- Expanding width distribution among cards
Column definitions in a layout table:
Card Column 1 Column 2 Column 3 Column 4 Column 5 Card 1 100px 50px (expanding 50px 25px (expanding 100px Card 2 50px 100px (expanding 100px 50px (expanding) 50px - The weight derived from the expanding column widths is 75 for Card 1 and 150 for Card 2.
- The sum of the non-expanding column widths is 450px.
In this example, when the container width is wider than the static portion of the cards, Card 1 gets half of the flexible width compared to Card 2. For example, if the container width is 480px, Card 1 will be 260px wide (250px static width + 10px of flexible width) and Card 2 will be 220px wide (200px static width + 20px of flexible width).
- Card behavior when container width changes
The following figures show example behaviors when the container width changes. In these examples, there are two cards, c1 (pink) and c2 (purple). The card container is indicated by an orange border and the card container background is yellow.
- Both cards have a static width.
The container is the exact size of the static width of c1 and c2.
The container is expanded past the static width of c1 and c2. The yellow background is visible.
The container is contracted to be smaller than the static width of c1 and c2, so c2 drops to a new line and the background is visible.
- C1 is expanding and c2 is static.
The container is the exact size of the static width of c1 and c2.
The container is expanded past the static width of c1 and c2. C1 expands to fill the extra space.
The container is contracted to be smaller than the static width of c1 and c2. C2 drops to a new line, and the background is visible. C1 expands to fill the width of the container.
- Both cards are expanding.
The container is the exact size of the static width of c1 and c2.
The container is expanded past the static width of c1 and c2. C1 and c2 expand to fill the extra space.
The container is contracted to be smaller than the static width of c1 and c2. C2 drops to a new line, and both cards expand to fill the width of the container.
- Both cards have a static width.