![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-9f09e940-0c28-48c3-b149-a6abc29230c3-DOCS IMAGE LIGHT.png)
![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-2e72ef6f-071e-4557-b985-54461fa346b7-DOCS IMAGE DARK.png)
Pattern Components
Pattern components are comprised of rows or columns of cards. In the component menu the picture of one of the cards will be displayed for that pattern component.
.png)
A pattern component available in Umbria
A pattern component available in Umbria
Adding Cards
When a pattern component is selected a dotted box will appear to indicate where a new card will be placed if added. If there are three cards in a row (for pattern components in rows) you cannot add anymore cards to the row.
Click the dotted box with a plus at the end of a card row to add a card. For card columns click the dotted box with a plus at the bottom of the column.
.png)
The dotted box appears where a new card can be added
The dotted box appears where a new card can be added
Removing Cards
To remove cards from either row stacks or column stacks, click the red trashcan on the right sidebar on the expandable tab for that card.
The order of the tabs on the right sidebar indicate the cards from left to right for rows and top to bottom for columns.
.png)
Clicking the highlighted red trashcan will delete the last card in stack
Clicking the highlighted red trashcan will delete the last card in stack
Pattern Settings
These customizations are found in the right sidebar after selecting the pattern component you wish to edit.
The pattern settings on the right sidebar for three cards in a row
The pattern settings on the right sidebar for three cards in a row
Card Style
Row / Column Style
Individual Card Settings
Settings within the Card Style tab affect the size of the cards. The Card Style tab is only applies to cards in rows not columns.
"Card Style" tab in the right sidebar
"Card Style" tab in the right sidebar
Width
The width setting will change the width of individual cards.
Regular
Setting "Width" to "Regular" will make each card will take a static width regardless of the number of cards in the row.
Setting "Width" to "Regular"
Setting "Width" to "Regular"
.png)
Stretch
Setting "Width" to "Stretch" will make each card stretch to fill the row. This is only possible with less than three cards in the row.
Setting "Width" to "Stretch"
Setting "Width" to "Stretch"
.png)
Height
The height setting will change the height of individual cards.
Regular
Setting "Height" to "Regular" will make each card will take the minimum height required to hold their content.
Setting "Height" to "Regular"
Setting "Height" to "Regular"
.png)
Stretch
Setting "Height" to "Stretch" will make each card stretch to match the tallest card in their row; this can be used to make all the cards the same height.
Setting "Height" to "Stretch"
Setting "Height" to "Stretch"
.png)
Pattern Components
Pattern components are comprised of rows or columns of cards. In the component menu the picture of one of the cards will be displayed for that pattern component.
A pattern component available in Umbria
A pattern component available in Umbria
Adding Cards
When a pattern component is selected a dotted box will appear to indicate where a new card will be placed if added. If there are three cards in a row (for pattern components in rows) you cannot add anymore cards to the row.
Click the dotted box with a plus at the end of a card row to add a card. For card columns click the dotted box with a plus at the bottom of the column.
The dotted box appears where a new card can be added
The dotted box appears where a new card can be added
Removing Cards
To remove cards from either row stacks or column stacks, click the red trashcan on the right sidebar on the expandable tab for that card.
The order of the tabs on the right sidebar indicate the cards from left to right for rows and top to bottom for columns.
Clicking the highlighted red trashcan will delete the last card in stack
Clicking the highlighted red trashcan will delete the last card in stack
Pattern Settings
These customizations are found in the right sidebar after selecting the pattern component you wish to edit.
The pattern settings on the right sidebar for three cards in a row
The pattern settings on the right sidebar for three cards in a row
Card Style
Row / Column Style
Individual Card Settings
Settings within the Card Style tab affect the size of the cards. The Card Style tab is only applies to cards in rows not columns.
"Card Style" tab in the right sidebar
"Card Style" tab in the right sidebar
Width
The width setting will change the width of individual cards.
Regular
Setting "Width" to "Regular" will make each card will take a static width regardless of the number of cards in the row.
Setting "Width" to "Regular"
Setting "Width" to "Regular"
Stretch
Setting "Width" to "Stretch" will make each card stretch to fill the row. This is only possible with less than three cards in the row.
Setting "Width" to "Stretch"
Setting "Width" to "Stretch"
Height
The height setting will change the height of individual cards.
Regular
Setting "Height" to "Regular" will make each card will take the minimum height required to hold their content.
Setting "Height" to "Regular"
Setting "Height" to "Regular"
Stretch
Setting "Height" to "Stretch" will make each card stretch to match the tallest card in their row; this can be used to make all the cards the same height.
Setting "Height" to "Stretch"
Setting "Height" to "Stretch"
Pattern Components
Pattern components are comprised of rows or columns of cards. In the component menu the picture of one of the cards will be displayed for that pattern component.
A pattern component available in Umbria
A pattern component available in Umbria
Adding Cards
When a pattern component is selected a dotted box will appear to indicate where a new card will be placed if added. If there are three cards in a row (for pattern components in rows) you cannot add anymore cards to the row.
Click the dotted box with a plus at the end of a card row to add a card. For card columns click the dotted box with a plus at the bottom of the column.
The dotted box appears where a new card can be added
The dotted box appears where a new card can be added
Removing Cards
To remove cards from either row stacks or column stacks, click the red trashcan on the right sidebar on the expandable tab for that card.
The order of the tabs on the right sidebar indicate the cards from left to right for rows and top to bottom for columns.
Clicking the highlighted red trashcan will delete the last card in stack
Clicking the highlighted red trashcan will delete the last card in stack
Pattern Settings
These customizations are found in the right sidebar after selecting the pattern component you wish to edit.
The pattern settings on the right sidebar for three cards in a row
The pattern settings on the right sidebar for three cards in a row
Card Style
Row / Column Style
Individual Card Settings
Settings within the Card Style tab affect the size of the cards. The Card Style tab is only applies to cards in rows not columns.
"Card Style" tab in the right sidebar
"Card Style" tab in the right sidebar
Width
The width setting will change the width of individual cards.
Regular
Setting "Width" to "Regular" will make each card will take a static width regardless of the number of cards in the row.
Setting "Width" to "Regular"
Setting "Width" to "Regular"
Stretch
Setting "Width" to "Stretch" will make each card stretch to fill the row. This is only possible with less than three cards in the row.
Setting "Width" to "Stretch"
Setting "Width" to "Stretch"
Height
The height setting will change the height of individual cards.
Regular
Setting "Height" to "Regular" will make each card will take the minimum height required to hold their content.
Setting "Height" to "Regular"
Setting "Height" to "Regular"
Stretch
Setting "Height" to "Stretch" will make each card stretch to match the tallest card in their row; this can be used to make all the cards the same height.
Setting "Height" to "Stretch"
Setting "Height" to "Stretch"