Button-Style Cards

How to add a Button-Style Cards component

Step 1: Add and configure Button-Style Cards component

1. Add a Button-Style Cards component (see Adding a component for instructions on how to add a component).
2. Select the Section Heading tab to add an optional section that appears at the top of the Button-Style Cards component (see Adding a component heading for details about adding a section heading).
3. Select the Block Settings tab.
4. Select a heading level from the Card Heading Level menu that correctly reflects the information structure of the content. For example, if your Button-Style Cards component has a H2 heading, the Card Heading Level (the headings on individual Button-Style Cards) should be H3.
5. Select an alignment from the Icon Placement menu to align the icon to the Left or Right side of the card.
6. Add an optional Page Anchor Link to allow for links to the Button-Style Cards component (see instructions under Linking to page content).
7. Select the Color Settings tab.
8. Select from the Color Scheme menus:
   1. Component Color Scheme: Background and foreground colors for the overall component.
   2. Card Color Scheme: Background and foreground colors for cards. 
9. Review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Add a Button-Style Card item

1. Select the Content tab.
2. Use the arrow controls or enter a value in the Columns field. This value should be the number of cards to display in a single row; to display four cards in a single-row grid, set the number to 4.
3. Select the Add Button-Style Card button.
4. Fill out the following information:
   1. Heading: A heading that describes the linked resource. The heading also serves as the link text for the linked resource.
   2. Link: The URL of the highlighted resource, to learn more.
   3. Body: Introductory text that further describes the referenced resource. This should be no more than a few sentences with details that compel users to follow the link to learn more.
5. Choose a Media Type to display an Icon or Image at the top of the card item.
   1. Icon Media Type: Use the Card Icon autocomplete input to locate and select your icon from the dropdown list of matching icons. You can review available icon options from the Material Design Icon List.
   2. Image Media Type: Select the Add image button to select an image from the media library or upload a new image (see Media Library for details about working with the media library). The optimal image size (in pixels) for a Button-Style Card is 960 x 540 (see Image Sizes for more details). Provide the appropriate alternative text or mark the image as decorative, depending on the role of the image on the page (see When to add alt text for best practices for providing alternative text).

Step 3: Configure Button-Style Card item settings

1. Select the Block Settings tab.
2. Add an optional Page Anchor Link to allow for links to the Button-Style Card item (see instructions under Linking to page content).
3. Once you have completed your Button-Style Card item configuration settings, choose Save to save the Button-Style Card item.

Step 4: Save Button-Style Cards component

1. Preview the Button-Style Card item in the Button-Style Cards section of the Create new Button-Style Cards dialog. You can add more Button-Style Card items by clicking the plus sign next to the first Button-Style Card item.
2. Once you have finished adding Button-Style Card items, choose Save to save the Button-Style Cards component.