Paragraph Type NCIDS Wide Guide Card - NCIOCPL/cgov-digital-platform GitHub Wiki

An NCIDS Wide Guide Card component is a card for featuring up to three call-to-actions with description text on an NCIDS Mini Landing Page which moves the image to the side to improve user scroll depth. It provides imagery next to content links in order to give users further context for the subject matter, as well as improving users' ability to scan, and reducing ad-blindness.

NCIDS Wide Guide Cards are placed inside the Contents field of Mini Landing Pages with the NCIDS style.

Properties

  • Display Name: NCIDS Wide Guide Card
  • Machine-readable Name: ncids_wide_guide_card
  • Description: NCIDS Wide Guide Card Component for Mini Landing Pages

NCIDS Wide Guide Card Component Styles

  • None

Allowable Contents

Fields

Title

  • Field Name: field_wide_guide_card_title
  • Label: Title
  • Type: Text
  • Required: No
  • Max Characters: N/A
  • Tooltip Text: Displays above the body text and call-to-action buttons. Used to concisely describe the featured content.
  • Cardinality: 1
  • Translatable: No

Image

  • Field Name: field_image_wide_guide_card
  • Label: Image
  • Type: Media upload
    • Allows Media:image
  • Required: No
  • Tooltip Text: Displays to the right of the content and call-to-action buttons. Keep 1:1 aspect ratio.
  • Cardinality: 1
  • Translatable: Yes

Card Description

  • Field Name: field_guide_card_description (reuse from Guide Cards)
  • Label: Description
  • Type: Simple WYSIWYG (text input with bold and italics)
  • Required: Yes
  • Character Limit: N/A
  • Tooltip Text: Displays in the box to the left of the image. Should provide context for the card's call-to-action buttons.
  • Cardinality: 1
  • Translatable: No

Links

  • Field Name: field_three_link_buttons
  • Label: Links for Wide Guide Card Buttons
  • Type: Paragraphs
  • Required: Yes
  • Max characters: N/A
  • Tooltip Text: The call-to-action buttons to display. Minimum of two (2), maximum of three (3).
  • Cardinality: 3
  • Translatable: Yes

Form Display

  • Title
  • Image
  • Card Description
  • Links