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.
- 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 classcard--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. - CRD2: Title Cards appear in a 2 column layout. Title Cards are currently available on Solution Landing pages.
- 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.
- 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. - 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.
- 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. - 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.
- 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.
- 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.
- 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. - CRD11: Person Cards include a heading and subheading displayed below an image.
- 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.
- 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.
- 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. - 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. - 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
, ordark-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 anh3
.
- The graphic section will get the
Card Types
CRD1 Image Cards - Default
CRD1 Image Cards - Panel Style
-
Lorem Ipsum Dolor
Ut enim ad minim veniam, quis nostrud.
-
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing
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
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
CRD2- Title Cards
CRD3- Contact Info Cards
-
Headquarters
London
Phone: +44 (0) 20 3906-7630 30 Furnival Street
3rd Floor
London EC4A 1JQ
United Kingdom -
-
CRD4 - Homepage Hero Feature Cards - Minimal Style/Default
CRD4 - Homepage Hero Feature Cards - Centered with Description
-
Tax Tool
Hero Card Centered with description.
Access tax rates for over 11,000 U.S. and Canadian tax jurisdictions with our one click calculator.
-
Tax Tool
Hero Card Centered with description.
Hero cards appear in a 3-col list on the front page only.
-
Tax Tool
Hero Card Centered with description.
Access tax rates for over 11,000 U.S. and Canadian tax jurisdictions with our one click calculator.
CRD5 Alert/Announcement Card
Announcement Card
CRD6 Solution Highlight Card
-
Card Solution Highlight
Automate tax calculations and updates and leverage hybrid deployment options.
-
Value-Added Tax
Vertex leverages global expertise and partnerships with leading ERP, procurement, and e-commerce platforms.
-
Card Solution Highlight
Automate tax calculations and updates and leverage hybrid deployment options.
-
Value-Added Tax
Vertex leverages global expertise and partnerships with leading ERP, procurement, and e-commerce platforms.
CRD 7 - Basic Cards
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout, no link.
This is short supporting copy that describes the CTA.
CRD8 - Logo Cards in 4-col List
CRD9 Resource card - Resource
-
White Paper
Card Title will be truncated if it is too long to fit
The icon at the top and the bug text will change depending on the type of Resource the card represents.
Listen Time Less Than 1 Min
-
Video
Card Title will be truncated if it is too long to fit
This is a short description.
Read time 3 Mins
-
Default Resource
Card Title will be truncated if it is too long to fit lorem ipsom dolor sit amet.
Longer text here will set the max-height of all the cards in a list. Longer text here will set the height of cards in a list. Longer text here will set the height of cards in a list.
Watch time 2 Mins
CRD10 - Partner Card Expanded Information
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
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
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 -
-
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.”
CRD15 Button Card
-
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 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 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.
CRD16 Download Card
-
Lorem Ipsum
Lorem Ipsum Dolor Sit Amet Dolor Ipsum Lorem Ipsum Dolor Sit Amet
Lorem Ispsum Dolor Sit Amet -
-
CRD16 News Cards
-
Achieving True Tax and Compliance Efficiency
Technology is an enabler, but processes also need to transform.
-
The Taxman Gets invasive: the Reality of Data Collection and Shared Service Centers
Technology is an enabler, but processes also need to transform.
-
Best Practices for Domestic and Global Online Sellers
Watch this on-demand webcast to learn how various tax requirements across the world play together online.