Texas A&M University Beta WordPress Theme
With Sidebar

Card Groups

Component Tip

Use a card group when you have multiple pieces of related content that can stand on their own.

With Sidebar Components
Example 1

Default Standard Card Group

Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the default section style.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the default section style.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the bold section style.

 

Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

 

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

 

Front of J.K. Williams Building with a bush and pink flowers in bloom

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
Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the elegant section style.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

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 1Example Button 2
Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the default section style.

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

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
Front of J.K. Williams Building with a bush and pink flowers in bloom

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
Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the bold section style.

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

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
Front of J.K. Williams Building with a bush and pink flowers in bloom

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.

Front of J.K. Williams Building with a bush and pink flowers in bloom

Section Style

This example card group uses the elegant section style.

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

Layout Option

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

Button
Front of J.K. Williams Building with a bush and pink flowers in bloom

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
Front of J.K. Williams Building with a bush and pink flowers in bloom

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 1Button 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.