The Clot Clot Club Banner - 2

Components

PROGRESS UPDATE

The style guide is still a work in progress and there are still several areas being refined and components still being added: 

  • The majority of 'See all examples' call-to-actions are not pointing to examples yet
  • Some components haven't been added yet, these include: Layout grid component: Card layouts and Bento Box
  • Authoring guidelines are minimal and there is a separate workstream to fill out this tab across all components
  • There are still some formatting issues being worked through

*If you noticed any issues, please submit a request or reach out to the UX team with details

Browse components by type

Accordion component with three collapsed accordions, each with the title "Accordion title"

Accordion

Accordions are a set of stacked headings that show and hide information in a small space.

Example banner component with example image in back and card in front, including pretitle, banner title, example text, and link

Banner

Banners are containers for organizing related content and actions.

Example breadcrumb navigation, including the word home, a forward slash, and the word current page

Breadcrumb

Breadcrumbs are text links at the top of the page that locate the user within the navigation hierarchy.

Example of a default text button and link

Button

Buttons can trigger an event, an action, or can take the user to another destination.

Example of a teaser card, with pretitle, title, card description, and call to action button

Card

Cards are containers for organizing related content and actions.

Example of a carousel with heading how we help patients do more. There are three cards visible. The first card contains an image of two people in lab coats talking in a circle with two people in suit jackets, followed by card header, card details, and card link. The second card contains an image of a medical device, followed by card header, card details, and card link. The third card is only slightly visible, and the arrows at the top indicate users need to advance to see additional card in the carousel.

Carousel

Carousels are used to fit a lot of content into a small space. Because carousels are common anti-patterns, this component is used by approval only.

Three square containers are pictured. The first has a subtle grey background and advancing arrows, the second has a white background and gradient border, and the third has a white background with shadow treatment and a gradient across the bottom.

Container

Containers group similar components and can have a background color applied

Dialog window from AEM showing selection options and a call-to-action button

Content fragment

Content fragment allows a content fragment asset, its elements and variations to be presented on a page.

Modal withe header disclaimer modal, followed by description, with two call to action options on the bottom and an x to close the window in the upper right

Disclaimer modal

Disclaimer modals appear on page load and disable the page until the user takes an action.

Download button with download icon

Download

Download links to an asset for the user to download or view.

Video still showing two people with arrow indicating play in center, bordered by a gradient accent on the lower left

Embed

Embed allows third-party content to be added to a page. Media can be added from a supported URL, a pre-configured embeddable URL, or with safe freeform HTML.

Black rectangle with product image on left and text on right, plus call to action

Experience fragment

Experience fragment allows an experience fragment variation to be presented on a page.

Example form with fields for user to enter first name, last name, email address, and phone number. All fields are required as indicated by stars near the field labels

Forms

Forms are added by using the External App Container component to embed a Formstack script.

Hero image example with large background image spanning the width and most of the vertical space in the browser, and on top of the image a navy card with branded arrows and pretitle, title, card description, link, and gradient line on bottom of card

Hero

Heroes are containers for emphasizing promotional or important content.

Recangle with example image accompanied by offset accent gradient in lower right corner

Image

Image allows a single image asset to be added to the page.

Example of primary navigation including title and an engaged drop down menu showing four columns of example links

Primary navigation

Primary navigation lives at the top of the page and contains top-level navigation items and company branding. It can contain global site search, utility navigation, and primary actions.

Example of secondary navigation including title and two link options; one bolded, and one unbolded with an arrow

Secondary navigation

Secondary navigation is a group of links that allow the user to navigate within a section of a site.

Example of secondary navigation including title and two link options; one bolded, and one unbolded with an arrow

Separator

Separator shows a horizontal line on the page for dividing sections of content.

Table with 3 columns and 4 rows.

Table (text)

Table is used to display content in rows and columns using the RTE in the text component.

Example tab navigation showing three tabs. The first tab is called overview, and is bolded and active, showing text below that that says the faradrive steerable sheath offers improved left heart access. The second tab is called clinical data and is not selected. The third tab is called resources and is not selected.

Tabs

Tabs organize content into sections and allow users to navigate between them.

Tertiary navigation example with header titled on this page, followed by four lines reading content section

Tertiary navigation

Tertiary navigation is a group of jump links that allow the user to quickly see and navigate to relevant sections of content on a page.

Example text on navy; large letters say callout in gradient font, followed by smaller white text below

Text

Text is used for body text content.

Example title in bold font centered with gradient accent element framing upper left of text

Title

A title is a heading for the page or a page section.

null

Banner

Banners are containers for organizing related content and actions.

null

Card

Cards are containers for organizing related content and actions.

null

Carousel

Carousels are used to fit a lot of content into a small space. Because carousels are common anti-patterns, this component is used by approval only.

null

Embed

Embed allows third-party content to be added to a page. Media can be added from a supported URL, a pre-configured embeddable URL, or with safe freeform HTML.

null

Hero

Heroes are containers for emphasizing promotional or important content.

null

Image

Image allows a single image asset to be added to the page.

Table with 3 columns and 4 rows.

Table (text)

Table is used to display content in rows and columns using the RTE in the text component.

null

Text

Text is used for body text content.

null

Title

A title is a heading for the page or a page section.

null

Breadcrumb

Breadcrumbs are text links at the top of the page that locate the user within the navigation hierarchy.

null

Primary navigation

Primary navigation lives at the top of the page and contains top-level navigation items and company branding. It can contain global site search, utility navigation, and primary actions.

null

Secondary navigation

Secondary navigation is a group of links that allow the user to navigate within a section of a site.

null

Tertiary navigation

Tertiary navigation is a group of jump links that allow the user to quickly see and navigate to relevant sections of content on a page.

null

Wizard navigation

The wizard navigation is a custom component designed to funnel the user through a drill down tree to deliver them to a more detailed or personalized navigation link.

null

Accordion

Accordions are a set of stacked headings that show and hide information in a small space.

null

Container

Containers group similar components and can have a background color applied

Example of secondary navigation including title and two link options; one bolded, and one unbolded with an arrow

Separator

Separator shows a horizontal line on the page for dividing sections of content.

Table with 3 columns and 4 rows.

Table (text)

Table is used to display content in rows and columns using the RTE in the text component.

null

Tabs

Tabs organize content into sections and allow users to navigate between them.

null

Disclaimer modal

Disclaimer modals appear on page load and disable the page until the user takes an action.

null

Button

Buttons can trigger an event, an action, or can take the user to another destination.

null

Download

Download links to an asset for the user to download or view.

null

Forms

Forms are added by using the External App Container component to embed a Formstack script.