Card Component
Available on any page, the Card component allows cards of varying content to be displayed on the page with a large background image (card container).
Each Card component has a required background image and a number of CTA links that display after all the cards.
There are 5 different types of cards that can be added within the Card Component: Stat, Story, Stock, Announcements, and News. Each card type has its own content options as described below. See the home page for examples of how the various cards are intended to be used within each card component.
Dynamic Media Smart Crops:
- Card Container: TT-BA-Large-20-13
- Card: TT-BA-Medium-16-9
Notes:
- Card Container holds the background image for card components to lay on top
- Recommended to have 3 to 5 cards per container
Card Types
The Stat card is intended to show off specific numerical stats. Each Stat card can contain a headline, sub-headline, stat, stat description, and a stat disclaimer. All are optional. The stat text itself is recommended to be no more than 5 characters.
The News card is intended to show off a News Story from the site. The News card can contain an image, image alt, date, and a news headline. The content can be authored manually or pulled in dynamically from a news story page. The image is optional, but recommended. Recommended image dimensions are at least 508px by 286px. A 16 by 9 aspect ratio is automatically enforced and the image will be cropped as needed to maintain that ratio.
The Story card is intended to show off a News Story or other internal page from the site. Each Story card can contain a headline, image, image alt, story headline, story description, and a cta link to more stories. The Story card also has 3 background color options: default (grey), arctic (#50f0eb), and seafoam (#0ad2af). All content is optional. However, the image is recommended. Recommended image dimensions are at least 508px by 286px. A 16 by 9 aspect ratio is automatically enforced and the image will be cropped as needed to maintain that ratio.
The Stock card is intended to show off the current stock price and some links. Each Stock card can contain stock information and cta links. The stock information is pulled dynamically from a provided feed. The number of cta links is not limited. However, the recommendation is no more than 3 or 4.
The Announcements card is intended to show off up to 3 links to press releases or other such articles. Each Announcement card can contain a headline, a number of announcement links, and a cta link to more announcements. Each link contains a date and link text. The date is optional. Links can be authored manually or retrieved from a feed from Q4. If any announcement links are added manually, they will display instead of links retrieved dynamically from the feed. The recommended number of announcement links is 2 or 3.
Stat card, News card and Story card
This is the stat card headline
This is the stat card sub-headline. In ridiculus lobortis inceptos ante a justo parturient.
This is the stat card description. Adipiscing adipiscing mattis diam euismod enim.
This is the stat card disclaimer. Suspendisse magna est quisque vestibulum ac.
Leading by example— We’re changing the way we do business
We’re embedding environmentally sustainable practices throughout our supply chains and operations. See our 2030 commitments
reduction in greenhouse gas emissions intensity;
achieved goal by 2018, two years early.
Stock card and Announcements card
