Article Card

How To

• 1

  Add Article Card

  Inside a Band

  • Add a Band with the desired number of columns to the page.
  • Inside a column, select the Add Component button.
  • Select Article Card from the Choose Component dialogue box.

  Inside a Tabs/Accordion

  • Expand Advanced Settings.
  • Choose the desired Sidebar:
    • First Sidebar content appears before the Item Text of the Tabs/Accordion Item.
    • Second Sidebar content appears after the Item Text of the Tabs/Accordion Item.
  • Select the caret to expand the Component menu.
  • Select Add Article Card.  
• 2

  Main Image

  The Main Image is optional but is recommended because it helps draw attention to the Article Card. The ideal image dimensions for an Article Card depend on whether you want the image to be landscape, portrait, or square. You also have the option of using this image as the Background Image behind the Article Card Title in the Advanced Settings.

  Image Dimensions and Guidance

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

  Article Card Title and Link

  Fields with an asterisk (*) are required. 

  • URL (*) - Enter an address for the link. Options:
    • Internal Links - For links to pages on your website, you can:
      • enter <front> to link to the Home page.
      • search for the page Title to find and select it.
      • enter an internal path (such as /news/press-releases).
    • External Links - For links to pages on a different website, paste the full URL (Example: http://digitalcommons.nc.gov)
  • Link Title (*) - Enter the text to display for the link.
  • Title Heading Level (*) - Adjust the heading as needed. The default setting is H3.
• 4

  Description and Published Date

  • Description - Help visitors decide if they want to read the article. Enter a description to display on the Article Card.
  • Published Date - Display a date on your Article Card. Enter or select the date using the date picker.
• 5

  Advanced Settings: Main Image

  Background Image

  If desired, you can set the Main Image as the background for the Article Card Title. You may need to darken the background image to provide enough contrast for the Title to be readable. 

  Select the desired checkbox(es):

  • Use Main Image as Background - Overlays title on top of main image background.
  • Darken Background Image - Increases contrast between title and background image.

  Image Style

  If desired, select an Image Style from the drop-down menu to change the aspect ratio of your image:

  • Rectangle
  • Portrait
  • Square

  Image Dimensions and Guidance

  Examples of Main Image Styles

  Accordion

  • No Main Image
  • Main Image as a Background
  • Main Image Style Rectangle
  • Main Image Style Portrait
  • Main Image Style Square

  Tab/Accordion Items

  No Main Image

  First Sidebar

  January 1, 2026

  Clean-Up Time: Retire, Archive or Remediate PDFs

  Strategy to Remediate a Large PDF Library: This strategy helps you organize and prioritize your large collection of PDFs published on your state agency website in preparation for remediation to meet accessibility standards.

  Main Image as a Background

  First Sidebar

  Clean-Up Time: Retire, Archive or Remediate PDFs

  January 1, 2026

  Strategy to Remediate a Large PDF Library: This strategy helps you organize and prioritize your large collection of PDFs published on your state agency website in preparation for remediation to meet accessibility standards.

  Main Image Style Rectangle

  First Sidebar

  

  January 1, 2026

  Clean-Up Time: Retire, Archive or Remediate PDFs

  Strategy to Remediate a Large PDF Library: This strategy helps you organize and prioritize your large collection of PDFs published on your state agency website in preparation for remediation to meet accessibility standards.

  Main Image Style Portrait

  First Sidebar

  

  January 1, 2026

  Clean-Up Time: Retire, Archive or Remediate PDFs

  Strategy to Remediate a Large PDF Library: This strategy helps you organize and prioritize your large collection of PDFs published on your state agency website in preparation for remediation to meet accessibility standards.

  Main Image Style Square

  First Sidebar

  

  January 1, 2026

  Clean-Up Time: Retire, Archive or Remediate PDFs

  Strategy to Remediate a Large PDF Library: This strategy helps you organize and prioritize your large collection of PDFs published on your state agency website in preparation for remediation to meet accessibility standards.

• 6

  Advanced Settings: Background Colors

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

  Card Background

  This adds a solid color behind the Article Card Title. If desired, use the drop-down menu to select a color:

  • No Color - White background.
  • Accent Background - The accent color appears behind the Title.
  • Dark Background - The primary background color appears behind the Title.
  • Light Background - The secondary light background color appears behind the Title.

  Description Background

  This adds a solid color behind the Description on the Article Card. If desired, use the drop-down menu to select a color:

  • No Color - White background.
  • Accent - The card is the accent color behind the description.
  • Dark - The card is the primary background color.
  • Light - The card is secondary light background color.

  Examples of Background Combinations

  Accordion

  • Main Image Card Background, Dark Description Background
  • Accent Color Card and Description Backgrounds
  • Light Color Card and Dark Description
  • Dark Color Card and Light Description

  Tab/Accordion Items

  Main Image Card Background, Dark Description Background

  First Sidebar

  Digital Accessibility Resources

  Find training, testing tools, screen readers, and more!

  Accent Color Card and Description Backgrounds

  First Sidebar

  

  Digital Accessibility Resources

  Find training, testing tools, screen readers, and more!

  Light Color Card and Dark Description

  First Sidebar

  

  Digital Accessibility Resources

  Find training, testing tools, screen readers, and more!

  Dark Color Card and Light Description

  First Sidebar

  

  Digital Accessibility Resources

  Find training, testing tools, screen readers, and more!

• 7

  Advanced Settings: Height

  Card Height

  Choose a Card Height for the Article Card. The default value is 270 pixels. Other preset height options are:

  • 210 px
  • 240 px
  • 270 px
  • 300 px

  Height Override

  For a custom Card Height, enter a number for the height in pixels. The value entered in this field overrides the height value set in the Card Height menu.

  Note: When an Article Card is placed inside a band, the height is overridden and set to match the tallest item in the band for visual consistency. 

  Examples of Article Card Heights

  Accordion

  • 75 px Custom Card Height
  • 300 px Card Height

  Tab/Accordion Items

  75 px Custom Card Height

  First Sidebar

  

  Build and Test Web Content for Accessibility

  These accessibility standards and best practices make digital experiences everyone can use.

  300 px Card Height

  First Sidebar

  

  Build and Test Web Content for Accessibility

  These accessibility standards and best practices make digital experiences everyone can use.

• 8

  Save

  Select the Save button to save the page and view results.