Article Card

How To

• 1

  Insert an Article Card

  • On Landing Pages or Site Pages, first insert a Band.
  • Select the Add Component button.

  

  • Select Article Card from the Choose Component dialogue box.

  Article Cards can also be placed on other Content Types. For example, an Article Card may be placed within a Tab/Accordion of a How-To Content Type. The interface differs, but the steps are similar.

  • Select the caret to expand the menu options.
  • Choose the Add Article Card paragraph component.  

  
• 2

  Main Image

  If desired, include a Main Image. 

  • Select Add Media.
    • Select an existing image file from the Media Library, or
    • In the Add or Select Media dialog box, select Choose File to upload a new image file.
  • Insert Selected
  • A thumbnail image of the image file you selected appears.

  Note: If the Article Card uses a background image, then the height should be double the selected card height; for example, 600 pixels high for a card height of 300 pixels. Minimum recommended resolution is double the desktop view size for clearer, better-looking images on high resolution screens.

  The ideal image dimensions for an Article Card depend on whether you want the image to be landscape, portrait, or square. 

  Article Card Dimensions	Width x Height
  Article Card - Default (Rectangle)	1152 x768
  Article Card - Portrait	752 x 1000
  Article Card - Square	1152 x 1152

• 3

  Description

  • Description — Enter a description for display on the Article Card.

  

• 4

  Description Background Color

  Description Background Color - Use the drop-down menu to select a background color for the description area of the Article Card from the menu. 

  Actual colors are determined by the color palette your website uses. The platform dynamically styles the text and icon color to contrast with the selected background color for proper visual contrast.

  Options include:

  • No Color - White background.
  • Light - The card is secondary light background color and changes upon rollover.
  • Accent - The card is the accent color and changes upon rollover.
  • Dark - The card is the primary background color and changes upon rollover.

  Accordion

  • No Color
  • Accent
  • Dark
  • Light

  Tab/Accordion Items

  No Color

  

  • No Color - White background.
  • Light - The card is secondary light background color and changes upon rollover.
  • Accent - The card is the accent color and changes upon rollover.
  • Dark - The card is the primary background color and changes upon rollover.

  Accent

  

  Dark

  

  Light

  

• 5

  Image Style

  • Choose an Image Style. (In this example, Portrait).

  

  Available Image Styles:

  • None — Displays original image scaled to fit.
  • Event — Displays original image scaled to fit.
  • Portrait — Crops image to 376 x 500 pixels.
  • Square — Crops image to 500 x 500 pixels.
• 6

  Link

  Fields marked with an asterisk (*) are required.

  URL (*) — Link the Article Card to a page or another website to direct site visitors to more information. Click anywhere on the published Card to link to the URL entered here.

  

  Link Text (*) — Enter text to display for the Link.

  

• 7

  Heading Level

  • Choose a Heading Level for the Card title.
  • The default value is h3.

  

• 8

  Card Background

  • Click Card Background to expand options.

  

  Image Background

  • Check Use Image as Card Background to overlay and center the Text Link on top of the image.

  

  • Leave Darken Image checked for better contrast with the Text Link.

  

  

  Solid Background

  • Choose the Solid Background option if a background image is not used for the Article Card. This option adds a background color box around the Link and adjusts the Link Text size and color.
  • Choose a color option:

  

  • No Color:

  

  • Accent Background:

  

  • Dark Background:

  

  • Light Background

  

  • Note: In theses examples, the Description Background Color in Step 5 above is set to match the Solid Background Color. The two sections can also be set to different colors to create a two-tone Card. Example:

  

  Card Height

  • Chose a Card Height for the Article Card. Preset height values include 210, 240, 270, and 300 pixels. The default value is 270.

  

  Height Override

  • For a custom Card Height, enter a number of pixels for the height (in this example, 75, as seen above). The value entered in this field overrides the height value set in the Card Height menu.

  

  Note: If the card is placed inside a band on a Landing Page, the height is set to match the tallest item in the band, overriding the Card Height set from the dropdown menu.

• 9

  Published Date

  • Leave the Published Date field empty to publish the Article Card immediately.

  

  • Click the Calendar icon to open the calendar and choose a publication date.

  

  • Choose a month and day for publication:

  

  

  • Click Today to choose the current day.
  • Click Clear to reset the calendar's date values to empty.
  • The publication date can also be set manually by clicking the day, month, and year and typing in the desired values:

  

• 10

  Keywords

  • Enter Keywords for the Article Card, if desired.

  

  • When  Keywords are entered, the search feature identifies terms already in the system.
  • To add more than one Keyword, click Add Another Item.

  

  

  • To reorder multiple Keyword entries, click-and-hold to use the Drag to Re-Order function.

  

  Entered Keywords appear on the Card in capital letters above the description. (In this example, Exhibits, Museum, and History):

  

• 11

  Text

  • Text entered in the Text field appears directly below the Article Card.
  • In this example, Left Text indicates the Card is being placed in the Left Column of a 3-Column-Band.

  

• 12

  Save

  • Click Save, at the bottom of the Edit page, to save the page and view results.