50/50 Cards

How to add a 50/50 Cards component

Step 1: Add and configure 50/50 Cards component

1. Add a 50/50 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 50/50 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 for 50/50 Card item headings from the Heading Level menu that correctly reflects the information structure of the content. For example, if your 50/50 Cards component has a H2 heading, the Card Heading Level (the headings on individual 50/50 Cards) should be H3.
5. Add an optional Page Anchor Link to allow for links to the 50/50 Cards component (see instructions under Linking to page content).
6. Select the Color Settings tab.
7. Select from the Color Scheme menus:
   1. Item Color Scheme: Background and foreground colors for the overall component.
   2. Card Color Scheme: Background and foreground colors for cards.
8. Review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Add a 50/50 Card item

1. Select the Content tab and select the Add 50/50 Card button.
2. Fill out the following information for the text panel:
   1. Eyebrow: Keywords that display above a heading. This could be a topic category.
   2. Heading: A heading that captures the topic of the card. The heading should be clear and descriptive.
   3. Body: Introductory text that further describes the topic of the card. This should be no more than a few sentences.
3. Next add an image to the component by selecting the Add image button. You can select an image from the media library or upload a new image (see Media Library for details about working with the media library).
   1. The optimal image size (in pixels) for a 50/50 Card is 2630 x 2630 (see Image Sizes for more details).
4. Provide an optional Caption to display below the image.
5. 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).
6. Select the Add Call to Action Link button to add up to two (2) call to action links to the text panel (for instructions, see Step 2: Add Call to Action Links on Adding a component heading).

Step 3: Configure 50/50 Card item settings

1. Select the Block Settings tab.
2. Select an alignment from the Image Alignment menu to align the image to the Left or Right side of the card.
3. Add an optional Page Anchor Link to allow for links to the 50/50 Card item (see instructions under Linking to page content).
4. Once you have completed your 50/50 Card item configuration settings, choose Save to save the 50/50 Card item.

Step 4: Save 50/50 Cards component

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