Card Groups with Featured Standard Cards
A card group with a standard featured card works the same way as a card group, but with one card featured in a visually prominent way. This component’s featured card is vertically oriented, and the other cards can either be vertically oriented (standard layout) or horizontally oriented (inline layout).
Use card groups with a featured card to display similar, related content, where there is one piece of content you want to feature more than the others. Don't use card groups with a featured card to display standalone content or sequential, continuous text. Each card should be made of self-contained content that stands on its own without the other cards in the group, but that also is on equal footing as the other cards.
Card Group with Standard Featured Card
Featured Card Options
This standard featured card has no media or CTA. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Section Style
This example card group with featured standard card uses the default section style.
Background Option
This example card group with featured standard card has no background.
Layout Option
This example card group with featured standard card uses the inline layout.
Media Option
The cards in this example card group with featured standard card have no media. All of the non-featured cards in this group must have matching media options.
CTA Option
The cards in this example card group with featured standard card have no CTA. All of the non-featured cards in this group must have matching CTA options.
Card Group with Standard Featured Card
You can have an overarching description to show how all of the cards in a card group are related to each other.
Featured Card Options
This standard featured card has an image and a button. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Button
Section Style
This example card group with featured standard card uses the default section style.
ButtonMedia Option
The cards in this example card group with featured standard card have icons. All of the non-featured cards in this group must have matching media options.
ButtonCTA Option
The cards in this example card group with featured standard card have buttons. All of the non-featured cards in this group must have matching CTA options.
ButtonCard Group with Standard Featured Card
You can have an overarching description to show how all of the cards in a card group are related to each other.
This standard featured card has an icon and a linked heading. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Media Option
The cards in this example card group with featured inline card have images. All of the non-featured cards in this group must have matching media options.
Link
CTA Option
The cards in this example card group with featured standard card have links. All of the non-featured cards in this group must have matching CTA options.
Link
Card Group with Standard Featured Card
Featured Card Options
This standard featured card has an icon and no CTA. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
This example card group with featured standard card uses the elegant section style.
This example card group with featured standard card has a maroon background.
This example card group with featured standard card uses the standard layout.
The cards in this example card group with featured standard card have icons. All of the non-featured cards in this group must have matching media options.
The cards in this example card group with featured standard card have linked headings. All of the non-featured cards in this group must have matching CTA options.
Card Group with Standard Featured Card
This standard featured card has no media and a linked heading. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Section Style
This example card group with featured standard card uses the default section style.
Button
Background Option
This example card group with featured standard card has a charcoal background.
Button
Media Option
The cards in this example card group with featured standard card have no media. All of the non-featured cards in this group must have matching media options.
Button
CTA Option
The cards in this example card group with featured standard card have buttons. All of the non-featured cards in this group must have matching CTA options.
Button
Card Group with Standard Featured Card
Featured Card Options
This standard featured card has an icon and a button. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Button
Section Style
This example card group with featured standard card uses the bold section style.
Background Option
This example card group with featured standard card has no background.
Layout Option
This example card group with featured standard card uses the standard layout.
Media Option
The cards in this example card group with featured standard card have no media. All of the non-featured cards in this group must have matching media options.
CTA Option
The cards in this example card group with featured standard card have no CTAs. All of the non-featured cards in this group must have matching CTA options.
Card Group with Standard Featured Card
Featured Card Options
This standard featured card has an image and a button. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Button
Section Style
This example card group with featured standard card uses the elegant section style.
Link
Media Option
The cards in this example card group with featured inline card have icons. All of the non-featured cards in this group must have matching media options.
Link
CTA Option
The cards in this example card group with featured standard card have links. All of the non-featured cards in this group must have matching CTA options.
Link
Card Group with Standard Featured Card
Featured Card Options
This standard featured card has an image and a button. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Button
Section Style
This example card group with featured standard card uses the default section style.
Button
Background Option
This example card group with featured standard card has a maroon background.
Button
Media Option
The cards in this example card group with featured standard card have images. All of the non-featured cards in this group must have matching media options.
Button
CTA Option
The cards in this example card group with featured standard card have buttons. All of the non-featured cards in this group must have matching CTA options.
Button