Article Card

Content Teaser with Link to More Information

Summary

The Article Card acts as a general teaser for content, giving site visitors a clickable entry point that leads to more information. Article Cards can be added to a Band on a Landing Page.

Audience

Web Managers and Publishers can add Article Cards.

Example Article Card

Article Card example.

How To

  • 1

    Open a Band

     On a Landing Page, add or edit a Band. (In this example, a 3-Column Band).

    • Add a Band:

    Add Band button.

    Add Band menu.

    • Choose a Column (in this example, Left).

    Left Column dropdown.

    • Edit an existing Band:

    Edit Band button.

  • 2

    Titles

    Add Titles, if desired.

    • Full Width Top Title — In this example, Band Title.

    Full Width Top Title field.

    • This places a Top Title across the full width of the Band.

    Band Title

    • Left Top Title — In this example, Card Title. (Left Top Title indicates the Title is being placed in the Left Column of a 3-Column Band).

    Left Top Title field.

    • This places a Title above the Article Card.
  • 3

    Add Article Card

    • Under Child Paragraph, choose Add Article Card from the Add dropdown menu.

    Add Article Card menu.

    • In this example, Left Child Paragraph indicates the Card is being placed in the Left Column of a 3-Column-Band.
  • 4

    Description

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

    Description field.

  • 5

    Description Background Color

    • Description Background Color — Select a background color for the description from the dropdown menu (Durham Theme in this example).

    Description Background Color menu.

    • Options include:
    • No Color:

    No Color option.

    • Accent:

    Accent Color option.

    • Dark:

    Dark Color option.

    • Light:

    Light Color option.

  • 6

    Image

     Fields marked with an asterisk (*) are required:

    • Image — Click Add Media to add an image to the Article Card.

    Add Media button.

    • In the Add or Select Media dialog box, choose Select Files or drag-and-drop to upload an image. (In this example, "Carbine" Williams workshop exhibit at the N.C. Museum of History).

    Minimum Recommended Image Sizes:

    ContentWidth x Height
    Article Card Image1000 × 750
    - Full width band3840 × 1000
    - Two column full width band*1760 x 1000
    - Three column full width*1140 x 860
    - Three column constrained width*800 x 850

    * If the Article Card uses a background image, then the height should be double the selected card height (540 or 600). Minimum recommended resolution is double the desktop view size for clearer, better-looking images on high resolution screens. 

    Select Files button.

    • Alternative Text —  Enter a short description of the image used by screen readers and displayed when the image is not loaded. This is important for Accessibility.

    Alternative Text field.

    • Name (*) — Enter a name for the image.

    Name field

    • Leave the Show in Media Library and Published options checked.

    Show in Media Library and Published checkboxes.

    • Click Insert Selected.

    Insert Selected button.

  • 7

    Image Style

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

    Image Style dropdown menu.

    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.
  • 8

    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.

    URL field.

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

    Link Text field.

  • 9

    Heading Level

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

    Heading Level field.

  • 10

    Card Background

    • Click Card Background to expand options.

    Car Background field.

    Image Background

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

    Use Image as Card Background checkbox.

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

    Darken Image checkbox.

    Darken Image example.

    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:

    Card Background Color options.

    • No Color:

    No Color Background option.

    • Accent Background:

    Accent Background option.

    • Dark Background:

    Dark Background option.

    • Light Background

    Light Background option.

    • 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:

    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.

    Card Height menu.

    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.

    Height Override field.

    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.

  • 11

    Published Date

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

    Published Date field.

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

    Published Date field Calendar icon.

    • Choose a month and day for publication:

    Published Date field Calendar picker.

    Published Date set.

    • 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:

    Published Date manually entered.

  • 12

    Keywords

    • Enter Keywords for the Article Card, if desired.

    Keywords field.

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

    Keywords - Add Another Item button.

    Keywords field with multiple entries.

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

    Keywords field - Drag to Re-Order function.

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

    Keyword examples.

  • 13

    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.

    Left Text field.

  • 14

    Save

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

    Save button.