Card Grid
Card grid options
Card grid title
The title field is where to add the title or the heading for the entire card grid. Keep in mind title for specific card will be added later.
Card grid content
The “content” field is where to add description text for the card grid. This should generally be to add context or more information about the card grid.
Background color
The background color selector is where to choose the background color of the entire card component. Choosing the color of the specific cards is found later in the component.
Content width
“Content width” controls how wide the grid of cards is going to be.
- Default: This size is selected atomically and is set to fill a medium amount of space on the page.
- Large: If the cards begin to feel too cramped or the cards should be bigger, the “large” option will give more room to the card grid.
Card columns
The “card columns” option determines how many columns will be displayed for the card grid. As few as one column can be created or additional columns can be added up to a maximum of four. As cards are added to the component, they will atomically fill into the grid based on how many columns are selected.
Adding cards
Add cards
Once the settings are in place, it’s time to create the cards to fill the grid. To create the first card choose the “add” button. This will add the card with all of the fields to fill out.
Card title
The title of the specific card should be added into the “card title” field. This text can be formatted but will atomically be set to bold.
Card text
The main content of the card should be added in the “card text” field. The text can be styled using the provided styling options.
Card background color
The “card background color” provides the color choice for the cards background. It’s important to make sure that the cards color is different from the background color we selected so the cards are visible as cards.
Card hover color
The “card hover color” refers to what color the card will change to when a mouse is hovered over it. This should only be used if the intention is to make the card a clickable link. If the card won’t have a link, select “no hover.” If the card is going to have a link, the blue is a great color option for this. In fact, this shade of blue was specifically chosen and named “interactive blue” to show users that this is something they can interact with.
Card wrapping link
To make a card clickable as a link, click the “select link” button. This allows brings up a pop-up box with the options to add a URL. A custom link can be added into the URL field. The search field can also be utilized to search the site for any already existing pages for easy linking.
Card arrow
An additional option called “card arrow” will appear if a link is added the card. This will display an arrow when the card is hovered over. If the card is a link, it is generally a good option to select “yes, show hover state arrow.” Otherwise, this can be left as “no” to skip the arrow.
Card images
Card image
The “card image” provides the option to add an image to the card. Photos should be added to every card or none of the cards to keep a consistent look for our card grid. If an images is added, additional image options will appear.
Card image size
The card image size will determine how the image is sized and cropped.
- Full: The full option generally keeps the image at its original size but constrains the size to the width or heigh of the card.
- Thumbnail: The thumbnail provides a medium crop of the image but keeps the image in proportion with the card.
- Icon: The smallest option is the icon size. This sizes the image way down until it’s the size of a small icon.
Card image placement
The image’s position can be determined with the “card image placement.” Choose which side of the card the image will be displayed on.
Image hover
The “image hover” settings will determine how the image will behave when hovered over.
- None: No hover animation will happen
- Fade: The image will fade a color overlay over the image
- Zoom: The image will zoom in when hovered.
Example card grid
This is an example of a simple three column card grid