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, Vertical Linked, or Vertical Button.
- Horizontal and Vertical Postcards appear as a box of text, oriented either horizontally or vertically, with or without any of the other formatting options in this list.
- Vertical Linked Postcards are similar in structure to Vertical Postcards, but the entire postcard is clickable and takes the user to another page.
- Vertical Button Cards are similar to the above styles, but the link is formatted as a button in secondary styling on the bottom of the card.
- With image or without.
- With a link to additional information or without. If using Vertical Linked or Vertical Button styling, 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
Vertical Button Cards
Collections of Postcards
Examples of Collections with a flat background
Examples of Collections with a raised background
Horizontal Cards
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.
Vertical Button Cards
Vertical Button Cards have the same layout characteristics of a Vertical Card, with two key differences. First, when a link is included, it is formatted as a button at the bottom of the card. The specific colors of these buttons are dictated by the theme and color palette of your website, and will match the "secondary button" style. Second, the entire card will have a raised appearance, similar to that of "raised cards" within a collection. See below fore more information on raised cards.
Vertical Button Card with Image
This is a Vertical Button Postcard. In this example, an image is included and will be shown above the text of the card body.
Vertical Button Card with Image and no link
This is a Vertical Button Card. In this example, an image is included and will be shown above the text of the card body.
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, you can choose whether or not 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:
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.
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.
This is an example of Vertical Cards in a Collection of 3 across. This example includes an image, text, and link to more information.
Vertical Linked Card One
Vertical Linked Card, 3 across. This card has an image, text, and no link. It looks clickable but is not.
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.
Another example of a Vertical Postcard within a Collection, this time with 3 across.
Another example of a Vertical Postcard within a Collection, this time with 3 across.
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.
Vertical Button Card, Raised
Example of a Vertical Button Card within a Collection, with the raised option selected. As you can see, there is no difference in the appearance of Vertical Button Cards, as the raised appearance was always present.
Vertical Button Card, Raised
Example of a Vertical Button Card within a Collection, with the raised option selected. As you can see, there is no difference in the appearance of Vertical Button Cards, as the raised appearance was always present.
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: