Card Groups with Inline Featured Cards
A card group with an inline 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 horizontally oriented, and the other cards can either be vertically oriented (standard layout) or horizontally oriented (inline layout).
Use card groups with a featured inline card to display similar, related content, but where one piece of content is more important than the others.
Card Group with Inline Featured Card
Featured Card Options
This inline 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 inline card uses the default section style.
Background Option
This example card group with featured inline card has no background.
Layout Option
This example card group with featured inline card uses the inline layout, where cards are horizontally oriented.
Media Option
The cards in this example card group with featured inline 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 inline card have no CTA. All of the non-featured cards in this group must have matching CTA options.
Card Group with Inline Featured Card
Featured Card Options
This inline 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 inline card uses the default section style.
Button
Background Option
This example card group with featured inline card has a divider background.
Button
Layout Option
This example card group with featured inline card uses the standard layout, where cards are vertically oriented.
Button
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.
Button
CTA Option
The cards in this example card group with featured inline card have buttons. All of the non-featured cards in this group must have matching CTA options.
Button
Card Group with Inline 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 inline 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.
Layout Option
This example card group with featured inline card uses the inline layout, where cards are horizontally oriented.
Link
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 inline card have links. All of the non-featured cards in this group must have matching CTA options.
Link
Card Group with Inline Featured Card
Featured Card Options
This inline featured card has an icon and a link. Featured cards are unique because their media and CTA options don’t have to match the rest of the cards in the card group.
Link
This example card group with featured inline card uses the inline layout, where cards are horizontally oriented.
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.
The cards in this example card group with featured inline card have linked headings. All of the non-featured cards in this group must have matching CTA options.
Card Group with Inline 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 inline 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 inline card uses the elegant section style.
ButtonBackground Option
This example card group with featured inline card has a divider background.
ButtonLayout Option
This example card group with featured inline card uses the standard layout, where cards are vertically oriented.
ButtonMedia 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.
ButtonCTA Option
The cards in this example card group with featured inline card have buttons. All of the non-featured cards in this group must have matching CTA options.
ButtonCard Group with Inline Featured Card
Featured Card Options
This inline 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
Background Option
This example card group with featured inline card doesn’t have a background.
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.