Component

Card

SCSS Location: /styles/scss/partial/_cards.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

There is a base card treatment that can be evolved to have different types of content within it. All cards have the same hover/focus interactions, except for Contact Cards and the Alert/Announcement Card.

Guidelines

Item Design Guidelines Not Provided

Usage

Cards

Using the Basic Card as a starting point, there can be many different individual card types. Certain card types appear in specific components, while some appear primarily in card lists.

  1. CRD1: In an Image Card Section, there are two display options. The default presentation of the cards is the "White Background With Default Shadow" option, which will not show the subtitle, and will add the class card--image. If the "Gray Background With Shadow on Hover" checkbox is selected, the class card--image--panel will be added and the Card Subtitle will display. Image Cards are currently available to Global Detail, Product Service Detail, Solution & Solution Landing pages.
  2. CRD2: Title Cards appear in a 2 column layout. Title Cards are currently available on Solution Landing pages.
  3. CRD3: Contact Info Cards are used on the contact page, but allowed on any page. Contact Cards are designed to be used sequentially in a row, but may stand alone. Contact Cards are currently availabble to Global Detail, Product Service Detail, and Solution pages.
  4. CRD4: Homepage Hero Feature Card. The default presentation of these cards is the "minimal" version, which displays the link text instead of the card description, and left-aligns the content. If the CMS editor checks the "Show Card Descriptions" checkbox, the card--hero--minimal class is removed, the card description is rendered, and the card content will be center aligned.
  5. CRD5: The Alert/Announcement Card is used on the homepage as an alert for specific announcements or timely information. Optionally appears above the Homepage Hero Feature Cards.
  6. CRD6: Solution Highlight Cards leverage the --solution-highlight modifier to provide a custom responsive grid layout which changes from 1x4 to 2x2 to 4x1 responsively. The cards have no gutter inbetween and have a unique focus and hover state.
  7. CRD7: Basic Cards can have a link and supporting copy. If there is no link the text is grey and there is no hover style.
  8. CRD8: Logo Cards typically will have a logo, however, if no logo is available the Partner Name will appear and a brand-specific color bar will apear below the Partner Name. This color will be set in the CMS by the content editor. Icon cards use the green bar hover style, but do not transform vertically on-hover. Clicking anywhere within an Icon Card will show expanded information below the card. The features of this component will vary depending on how much information is available for the Partner.
  9. CRD9: Resource Cards have an icon assiciated with them based on the type of resource asset it represents. Default Resource Cards will display the icon and name of the asset type, the date of publication, the title and short descriptive text. Resource cards can also show the estimated read time. Resource Cards for Events will show the icon for the type of event, the event title, short descriptive text, and the time and date of the event. Resource Cards are most often displayed in 3-column lists, either in a Featured Resources section or in filtering results in the Resource Library or Upcoming Webcasts & Events pages.
  10. CRD10: When the Partner Card Expanded Information card is flagged as Validated by Vertex, the parent container should be given a class of card--expanded-partner--validated to adjust the card layout accordingly.
  11. CRD11: Person Cards include a heading and subheading displayed below an image.
  12. CRD12: When the Person Card is expanded, the expanded will display a heading, subheading, supporting text and optional social icons. The features of this component will vary depending on how much information is available for the Person.
  13. CRD13: The Stylized Card is used on the homepage to display featured customer stories. The card can include an optional video. If a video is not included, the component will fallback to display an image.
  14. CRD14: About Us Card includes a graphic element that can be controlled positionally via deco-graphic--top, deco-graphic--bottom, deco-graphic--both modifier classes.
  15. CRD15: Button Cards use the article tag and include an optional image, a heading, a description, and an anchor link displayed as a button. When navigating with the keyboard, tabbing should focus the button and not the card.
  16. CRD16: Download Cards include a graphic section and a content section with either a download link or link to a piece of content on site.
    • The graphic section will get the light-green, light-blue, or dark-blue modifier class depending on the CMS user's choice of background color.
    • The graphic section will get a specific document image depending on the type of content the card is referencing.
    • If the card is a download the link is given the attributes target="_blank" rel="noopener noreferrer".
    • If there is a universal header adjacent to the card list that contains either an eyebrow or heading, each card title should be rendered as a p. Otherwise, all card titles should be rendered as an h3.

Card Types

CRD2- Title Cards

CRD3- Contact Info Cards

CRD5 Alert/Announcement Card

Announcement Card

CRD 7 - Basic Cards

CRD8 - Logo Cards in 4-col List

CRD10 - Partner Card Expanded Information

CRD10 - Partner Card Expanded Information - No Validated Logo

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum
Category
Technology
Industry
Communication, Leasing, Manufacturing, Retail
Location
North America
Integrations

CRD10 - Partner Card Expanded Information - No Integrations

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum
Category
Technology
Industry
Communication, Leasing, Manufacturing, Retail
Location
North America

CRD11 - Person Cards in 3-col List

CRD12 - Person Card Expanded Information

David DeStefano

President and Chief Executive Officer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CRD13 - Stylized Card

  • Patagonia

    “We can now benefit from a single source of truth when it comes to tax. As our company grows, we can save time and budget.”

    See Shelley's Story

  • Walmart

    “Vertex has helped our bottom line by really growing our marketplace.”

    See Ben's Story
  • Text describing the image.

    Redbox

    “Over the past decade, we have continued to grow with confidence through Vertex. Now we can leverage our presence in the ecosystem”

    See Samantha's Story

CRD14 - About Us - Our Vision - Graphic Both

“We will accelerate global commerce, one transaction at a time.”

Text describing the image.
David DeStefano, CEO

CRD15 Button Card

  • Text describing the image.

    Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem Ipsum
  • Text describing the image.

    Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit

    Eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

    Lorem Ipsum
  • Text describing the image.

    Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Eiusmod tempor incididunt ut labore et dolore magna aliqua sed do eiusmod tempor incididunt.

    Lorem Ipsum

CRD16 Download Card

Style Guide Version 1.0.0

Last Updated:
© 2017 Vertex Inc All Rights Reserved