Site Studio
Adding cards to layouts
Use Card components to add defined blocks of content to the layouts. The UIKit includes a selection of cards for different content and design purposes. To access the Card components, open the Sidebar and scroll to the Card components category. View the Card components available.
Card components are designed to be placed within containing components. These include the 1 - 4 column layouts, Column, Container, Slide item, Accordion item and Tab item components. When placed, they will expand to fill the available width of the containing component. This means they’re adaptable for many different layout configurations.
When you place Card components in multiple columns, they will equalize in height regardless of the content within them (as shown below).
This is achieved using the Height field within the Card components. The Height settings include two options:
You can stack Card components on top of each other to create grid type layouts. When you stack Card components, they will fill the height available to them (as shown below) to maintain horizontal alignment. This is achieved using the Fill space available option within the Height field.
By default, there's a space below each card to maintain a separation from the card below (As shown below). This is achieved using the Add space below field within each component. The space below also acts as a separation when the cards stack into a single column on narrow screens.
You can change the color of the cards using the Background color field. If you select a color that has been tagged with Light, a dark text theme will be applied to the card text. If you select a color tagged with Dark, a light text theme will be applied to the card text. If you select no color or transparent color, a Text color field will be displayed so that you can manually select a Text color theme.
You can apply a border to the cards using the Border field. When a border is applied, you can select the color of the border.
Padding around the text content is automatically applied if a background color or border is applied to the card. This is to prevent the text from hitting the edge of the card border. If no background color or border is applied, you can manually apply or remove the padding around the card text.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
You can stack Card components on top of each other to create grid type layouts. When you stack Card components, they will fill the height available to them (as shown below) to maintain horizontal alignment. This is achieved using the Fill space available option within the Height field.
By default, there's a space below each card to maintain a separation from the card below (As shown below). This is achieved using the Add space below field within each component. The space below also acts as a separation when the cards stack into a single column on narrow screens.
You can change the color of the cards using the Background color field. If you select a color that has been tagged with Light, a dark text theme will be applied to the card text. If you select a color tagged with Dark, a light text theme will be applied to the card text. If you select no color or transparent color, a Text color field will be displayed so that you can manually select a Text color theme.
You can apply a border to the cards using the Border field. When a border is applied, you can select the color of the border.
Padding around the text content is automatically applied if a background color or border is applied to the card. This is to prevent the text from hitting the edge of the card border. If no background color or border is applied, you can manually apply or remove the padding around the card text.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio