FreddieMac.com

Cards

Cards are typically used to promote and link to content, and are not usually a stand alone design component.

Standard Cards with Squared Image

These standard cards typically have a concrete background, but can be inverted to be white if they are used in a non-white band.

picture of the house
Perspectives

Standard Card with Image and Category
outside view of office building

Standard Card w/o Category

Example of optional secondary text that can be added.

Yvette Gilmore

Centered Title

Example of centered secondary text, which is typically only used on marketing pages.

picture of the house
Perspectives

Standard Card with Image and Category
outside view of office building

Standard Card w/o Category

Example of optional secondary text that can be added.

Yvette Gilmore

Centered Title

Example of centered secondary text, which is typically only used on marketing pages.

No-Image Cards - White with Border

Card without an Image

Also called a Tile by some folks.

Another Card without Image

The blurb is required on these. It cannot be omitted.

Another Card without Image

The CTA is required on these. The CTA hover text can be customized. 

No-Image Cards - Light Gray

Card without an Image

Also called a Tile by some folks.

Another Card without Image

The blurb is required on these. It cannot be omitted.

Another Card without Image

The CTA is required on these. The CTA hover text can be customized. 

Standard Card Variations

Cards have an option to use round images (images will be displayed at 160px wide and tall).

a family smiling and moving in with boxes
Perspectives

Standard Card with Image and Category
Reference Bills

Standard Card w/o Category

Example of optional secondary text that can be added.

Primary Title

Example of secondary text, which is used to add more detail.

Specific & Custom Use Cards

Specific Use Cards built via Drupal components:

Custom Use Cards that are hand-coded using an embedded markup container: