1. Reference Card Location: You can either reference a page or set card information locally, and choose whether the card link opens in the same window/tab or a new new window/tab.
2. If you opt to reference a page, you will then choose a path from the picker.  This is used to pull the Reference information in from that resource.
   
   Reference info is set in Page Properties under the aptly named, “Reference information” tab. Here you can set the title, text, link text, tooltip, and resource type for your page. You can also set the background, image, and icon settings from this tab.

1. Reference Card Location: Set locally
2. URL: Clicking the reference card will take you to the URL specified here (this can be external link or internal path).
3. Content:
   • Title: The name of the card; think of this as the headline.
   • Text: Descriptive text about the card; think of this as the subheadline.
   • Link Text: User-facing link text.
   • Tooltip: Appears when a user hovers over the link.
   • Resource Type: This lets users know what type of resource they will be viewing, (e.g. e-book, white paper, etc.)
4. Background settings (Rectangular/Square Layouts): The information here is used for rectangular and  square layouts of the reference card.  Background options are shown in order of operations; a solid color will display unless gradient option is selected, and image will override Color & Gradient selections.
   • Background/Foreground Contrast: By default the component will have a light background and dark text.  To change contrast settings, select from the dropdown.  
     • A light background versus a light colored background differ in that a light background is used for solid colors and a light colored background is used for gradients.  By selecting light colored background, the text becomes slightly transparent and allows for some of the background color to be visible through the text.  
     • For more granular control, the option to customize these contrast settings also exist per device.
   • Solid Color: Select from solid color options or none.  This should be selected even when using a gradient so that in case the gradient doesn’t render the background will default to the selected solid color.
   • Gradients: Select from gradient options and a swatch will appear in the preview pane.
   • Image: Using the path selector, choose the rendition set for the square image to be used in this layout and notice a preview of your image will appear in the viewing pane below.
5. Foreground Image Settings: The foreground image is a rectangular image that will not have text overlaid on top and hence does not require contrast or color/gradient settings.  Choose the path from the picker or click the “Upload New” button to upload directly in the DAM. Then add alt text for screen readers/search crawlers
6. Icon Settings: You can choose from a variety of approved icons or use your own.  Simply choose the path from the picker or click the “Upload New” button to upload directly in the DAM. Then add alt text for screen readers/search crawlers.

The Filter ID tab is used to specify the reference card ID that will correspond to a filter in the Filter Frame component. Use a comma (no spaces) to separate your IDs.