Cards

Needs Specifications

Extending Bootstrap Cards.

Vertical Cards

Body w/ Text Elements
Header
Card Title
Card Subtitle

Card Body

Header
Body w/ Text Elements
Header w Anchor
Body w/ Text Elements
Header w Anchor
Card Title
Card Subtitle

Card Body

Header w Anchor
Body w/ Text Elements

Vertical Card Stacked Layout

Header
Body
Body w/ Text Elements

Body w/ Text Elements
Header / Mod p-0
Body
Body w/ Text Elements

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Vertical Card Side by Side Layout

Header
Body
Body w/ Text Elements
Body w/ Text Elements

Vertical Cards with Background

Body w/ Text Elements
Body w/ Text Elements
Body w/ Text Elements

Horizontal Card

Header
Text Elements

Nested Horizontal Cards

Header
Text Elements

Text Elements

Nested Horizontal Cards with Header

Header
Text Elements
Text Elements

Anchor Cards

Color Cards

Subtitle

In vel penatibus urna ac justo odio est vitae. Intesdfdsfsrdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext Bold and Emphasis Test
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext
Subtitle

In vel penatibus urna ac justo odio est vitae. Interdum vitae a. Lorem quam leo. Fusce ac vitae. Vel quis ultricies. Gravida velit pretium mi risus mauris.

Card Link

Subtext

Color Cards as Nav Buttons

Custom Cards

This has all of the WCMS output for cards within cards, and cards that have 'd-flex' and 'flex-fill' classes added to their containing div's to make them all have the same height.
What's New

The latest additions, as well as new resources and programs.

young people

15-24 year olds account for half of all new STD infections.

silhouettes of men

Men who have sex with men have higher rates of STDs.

pregnant woman

For a healthier baby, ask your doctor about STD testing.

What's New

The latest additions, as well as new resources and programs.

young people

15-24 year olds account for half of all new STD infections.

silhouettes of men

Men who have sex with men have higher rates of STDs.

pregnant woman

For a healthier baby, ask your doctor about STD testing.

Example image: young girl on bicycle

Image Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Find out how CDC supports prevention activities in 17 countries.

Find out how CDC supports prevention activities in 17 countries.

Read how CDC contributes to national lab systems, surveillance, reporting, and workforce development.

Read how CDC contributes to national lab systems, surveillance, reporting, and workforce development.

Learn about CDC’s achievements in emergency operations centers, public health and law enforcement, and medical countermeasures.

Learn about CDC’s achievements in emergency operations centers, public health and law enforcement, and medical countermeasures.

some caption

some caption

some caption

some caption

Does CDC have any trainings or job openings?

Does CDC have any job openings, training, or fellowship opportunities?

What vaccines should I receive before traveling to an international destination?

What vaccines should I receive before traveling to an international destination?

I have symptoms and want to know if I have a disease. What do my symptoms mean?

I have symptoms and want to know if I have a disease. What do my symptoms mean?

Image of a person sitting in a yoga pose

Why is it important to be physically active?


View Page In: PDF [150k] DOC [150k]
Page last reviewed: