Switch color palette

Click on your color palette below to match this page's appearance to your site

 

 

 

 

Canyon

 

Cardinal colors

 

 

 

 

Cardinal

 

 

 

 

 

Cliff

 

Lake color palette on colorful theme

 

 

 

 

Lake

 

Mountain color palette on colorful theme

 

 

 

 

Mountain

 

Ocean color palette on colorful theme

 

 

 

 

Ocean

 


Confused?

If things look different on your site, you must be on the Traditional theme. Visit the Traditional reference site.

Main content start

Postcard Layouts

Click your site's color palette from the left sidebar to see how each type of Postcard will look on your website.

A Postcard is a Component that displays as a box of text within your page. It has several styling options:

  • Horizontal, Vertical, or Vertical Linked. Horizontal and Vertical Postcards appear as a box of text, oriented either horizontally or vertically, with or without any of the other formatting option in this list. Vertical Linked Postcards are similar in structure to a Vertical Postcard, but the entire postcard is clickable and takes the user to another page. 
  • With image or without.
  • With a link to additional information or without. In the case of a Vertical Linked Postcard, a link should be included.

Postcards are typically added as an individual Component, meaning that one postcard will display per row. To display multiple Postcards, add a Collection and add Postcards within that area. Collections allow for the display of 1-4 Postcards per row and allow for additional styling options including a raised appearance. 

Jump to:

Horizontal Cards
Vertical Cards
Vertical Linked Cards

Collections of Postcards   |   Examples of Collections with a flat background   |   Examples of Collections with a raised background 

Resources

 

Horizontal Cards

Horizontal Cards can be thought of as postcards in landscape orientation. When an image is included, the text will display to the right of it. Links to additional information are optional.

Horizontal Card No Image

This is a Horizontal Postcard. In this example, there is no image so the text in the card body will span the entire width of your page. Links are optional when using the Horizontal Card and in this example we have a link. The formatting of the link varies depending on your theme and color palette. 

Horizontal Card with Image

This is a Horizontal Postcard. In this example, an image is included and will be shown on the left side of the card. The text of the card body be displayed to the right of your image. Links are optional when using the Horizontal Card and in this example we have a link. The formatting of the link varies depending on your theme and color palette. 

Horizontal Card with Image and no link

This is a Horizontal Postcard. In this example, an image is included and will be shown on the left side of the card. The text of the card body be displayed to the right of your image. Links are optional when using the Horizontal Card and in this example we do not have a link. 

Vertical Cards

Vertical Cards can be thought of as postcards in portrait orientation. When an image is included, the text will display below. Links to additional information are optional.

This is a Vertical Postcard. In this example, there is no image so the text in the card body will span the entire width of your page. Links are optional when using the Vertical Card and in this example we have a link. The formatting of the link varies depending on your theme and color palette. 

This is a Vertical Postcard. In this example, an image is included and will be shown above the text in the card body. Links are optional when using the Vertical Card and in this example we have a link. The formatting of the link varies depending on your theme and color palette. 

Vertical Card with Image and no link

This is a Vertical Postcard. In this example, an image is included and will be shown above the text included in the card body. Links are optional when using the Vertical Card and in this example we do not have a link. 

Vertical Linked Cards

Vertical Linked Cards have the same layout characteristics of a Vertical Card. The difference is that when a link is included, the entire card can be clicked by a user rather than just the arrow.  The styling of a Vertical Linked Card also is a bit different from the other two styles of Postcards. The title area appears in a block with a dark background, and the text of the card body appears in a block of a different color.  The specific colors of these blocks are dictated by the theme and color palette of your website.

Vertical Linked Card No Image

This is a Vertical Linked Card. In this example, there is no image so the text in the card body will span the entire width of your page. 

The entire box of a Vertical Linked Card is clickable and takes the user to your link. This means that any links included in your card body will not function. In instances where you need to include a link to another page or a file in your Postcard, choose a Horizontal or Vertical Card instead. 

Vertical Linked Card with Image

This is a Vertical Linked Postcard. In this example, an image is included and will be shown above the text of the card body. 

The entire box of a Vertical Linked Card is clickable and takes the user to your link. This means that any links included in your card body will not function. In instances where you need to include a link to another page or a file in your Postcard, choose a Horizontal or Vertical Card instead.

Vertical Linked Card with Image and no link

This is a Vertical Linked Card. In this example, an image is included and will be shown above the text of the card body. 

Although the name implies there will be one, Vertical Linked Cards do not need a link. You may choose this option when you desire the look of the Vertical Linked Card over one of the other options. The user will not be able to click on it, as there is nowhere for them to be taken.

Displaying Multiple Postcards in a Row using Collections

Postcards can be arranged such that up to 4 display on the same row. To do this, you'll need to add a Collection component. Within the Collection, select the desired number of items per row, 1-4, and select "Add Postcard." 

From there, the process is the same. You will select Horizontal, Vertical, or Vertical Linked Cards.

Note: When creating a collection that includes 2-4 items per row, the height of each row will be uniform. To optimize aesthetics, aim for the content of each item to be approximately the same length, both in the title and body areas of the cards. 

Flat Cards

Here are some examples using a flat (standard) background:

Stanford skyscape

Horizontal Card

This is an example of a Collection with 2 Horizontal Cards in a row. This example has an image, text, and link to more.

Horizontal Card 2

This is an example of a Collection with 2 Horizontal Cards in a row. This example has an image, text, and link to more.

Books on a shelf

Vertical Card One

This is an example of Vertical Cards in a Collection of 3 across. This example includes an image, text, and no link.

woman in a red shirt smiling

This is an example of Vertical Cards in a Collection of 3 across. This example includes an image, text, and link to more information.

Books on a shelf

Vertical Linked Card One

Vertical Linked Card, 3 across. This card has an image, text, and no link. It looks clickable but is not.

woman in a red shirt smiling

Vertical Linked Card Two

Vertical Linked Card, 3 across. This card has an image, text, and link to more information.

A Collection of Vertical Linked Cards can also be used as eye-catching buttons, for instance on a landing page where users can select which area of your site they wish to view next. For instance, the sample card below could be titled "Academic Requirements" and "Research Areas."

Finally, here is an example where the amount of text within each Card of the Collection is different. As you can see, the cards function as intended, but appear in different sizes.  

Raised Cards

Horizonal, Vertical, and Vertical Linked Postcards can be given an optional 3D "raised" look. To do this, create a Collection, check the box for "raised cards," and add Postcard(s) into it. Here are some examples:

Horizonal Postcard without Image

This is an example of a Horizontal Postcard without an image. It is in a collection with 1 item per row, and the option for "raised cards" is selected. A link is also included in this example.

Horizontal Postcard with Image, No Link

This is an example of a Horizontal Postcard with an image. It is in a collection with 1 item per row, and the option for "raised cards" is selected. No link is included in this example.

This is an example of a Vertical Postcard with an image. It is in a collection with 1 item per row, and the option for "raised cards" is selected. A link is also included in this example.

Geophysics Seminar: Dr. Jean-Luc Margot

Another example of a Vertical Postcard within a Collection, this time with 3 across.

Geophysics Seminar: Dr. Jean-Luc Margot

Another example of a Vertical Postcard within a Collection, this time with 3 across.

Geophysics Seminar: Dr. Jean-Luc Margot

Another example of a Vertical Postcard within a Collection, this time with 3 across.

Vertical Linked Card, Raised

Example of a Vertical Linked Card within a Collection, with the raised option selected. As you can see, there is no difference in the appearance of Vertical Linked Cards.

Vertical Linked Card, Raised

Example of a Vertical Linked Card within a Collection, with the raised option selected. As you can see, there is no difference in the appearance of Vertical Linked Cards.

Resources

Additional information, including step by step instructions for using Postcards and Collections as shown above can be found in our Drupal 9 Wiki Guide: