Card Groups – fmstest1

Example 1

Default Standard Card Group

Section Style

This example card group uses the default section style.

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

CTA Option

This example card group doesn’t have a CTA. All cards in a card group must have the same CTA option.

Example 2

Default Inline Card Group

All card groups have the option to have a section description to contextualize the cards in the group. This example card group uses a divider background.

Section Style

This example card group uses the default section style.

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

CTA Option

The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.

Example 3

Default Linked Card Group

Section Style

This example card group uses the default section style.

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.

Example 4

Bold Card Group with Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Section Style

This example card group uses the bold section style.

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

CTA Option

The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.

Example 5

Elegant Card Group with Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Example Button 1

Section Style

This example card group uses the elegant section style.

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

Callouts

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

Accordion Group

CTA Option

The cards in this example card group uses links as their CTA option; each card can have 1-3 links. All cards in a card group must have the same CTA option.

Example 6

Default Card Group with Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Example Button 1 Example Button 2

Section Style

This example card group uses the default section style.

Button

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Button

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

Button

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Button

Example 7

Bold Card Group with Images

All card groups have the option to have a section description to contextualize the cards in the group.

Example Button 1

Section Style

This example card group uses the bold section style.

Button

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

Button

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

Button

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Button

Example 8

Elegant Card Group with Images

All card groups have the option to have a section description to contextualize the cards in the group.

Section Style

This example card group uses the elegant section style.

Button

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Button

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

Button

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Button

Example 9

Elegant Linked Card Group with Images

All card groups have the option to have a section description to contextualize the cards in the group.

Section Style

This example card group uses the elegant section style.

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.

Example 10

Bold Linked Card Group with Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Button 1 Button 2

Section Style

This example card group uses the bold section style.

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.