Cards

Cards are a significant part of our new digital brand at BGSU. There are multiple ways that cards can be used, and they can be used for a variety of components.

There are a few distinguishing characteristics of a card.

  • Cards have no fixed width - and will expand to fill it's parent container.
  • Cards have no fixed height - side-by-side cards with different length of content will not be the same height. There are other methods you can utilize to achieve this [link later]
  • Consistent rounded edges
  • A border that is defined either by a stroke, a shadow, or by contrast with the background color of the container.
  • Header images in cards will bleed the width of the card, including the rounded edges in the top left and right corners, while the bottom left and corners will be square.
  • Images can be full-bleed within certain card types, and will also have the rounded edges on all four corners.
  • When a card features a button, or a strong singular call-to-action - the entire card should be made clickable rather than just the button/link.
    • When an entire card is clickable the user should be aware of this via interactive states such as hover

When to use a card

  • When a specific piece of content needs to stand out on the page
  • When there is content that is similiar, and you wish to visually "group" them while keeping them separate.
  • When a user needs to make a singluar choice among similiar options, they can be presented as cards.

When NOT to use a card

  • There is no need to make every box of content on your page a card.  Headings and spacing are sufficient enough to separate paragraphs and sections from one another.
  • Do NOT use a card simple because you want your page to have "more branding"
  • Do NOT use a card that presents multiple calls to action to the user.
    • No card should ever have more than one button present.   

Marketing and Brand Strategy

Tucker Telecommunications Center,
245 Troup Ave.
419-372-2616
marketing@bgsu.edu

How to trigger a card

Cards can currently be triggered on the following components.

Text Component | Call Out Box | Background Area

Text Component Cards

Using the "Classes" tab of the Text component - the card can be triggered using the class name of card in the "Additional Classes" field.

card

This is a standard text component with a class of card in the Classes tab.

A text card without a button will display with a light border and no hover effects.

Linked Text Component Cards

A linked text card can only have one link present within.  By adding the linked class name, the system will make the entire card clickable to the link that is present in the card - and add appropriate visual stylings and interactive effects to help cue the user of the behaviour of the clickable card element.

card linked

This text component has a heading

It also has some paragraph copy within it. We've also created a link and styled it as a...

Button

The clickable card effect works with a button present

This text component has a heading

It also has some paragraph copy within it, and even a plain text link.

The clickable card effect works with any singular link within the text component.

Do NOT use the card linked styles on text components with more than one link. They will not work as intended.

Call Out Box Cards

Using the "Styles" tab of the Call Out Box component - the card can be triggered using the class name of card in the "Additional Classes" field.

All Call Out Box cards should always have at least

  • An image cap at the top of the card
  • A title
  • A link

Call Out Box cards can have

  • A description area, that accomodates rich-text-editor options
  • A button
card

This is the title

A call out box card, with an image, a link, and a title.  This is the minimum suggested use of a call out box card.

This is the title

This is the description field

A call out box card, with an image, a link, title, and description. 

This is the title

This is the description field

This is my custom CTA

A call out box card, with an image, a link, title, description, and the call to action field filled.  By populating the call to action field a button is created with the text provided.

Call Out Box cards should NOT be created that contain NO links, OR multiple links. Only use the provided link field.

Don't use me without a link

I look clickable but I am not

Don't use me with multiple links

I've added more links within the description. That is going to cause issues, as the other links will not be able to be interacted with, and should never be done.

pA17I0691

A call out box card, with only an image and a link.  This is possible but should be avoided as there's no indication to any user where this linked image will take them, or why they should interact with it. There are better ways to achieve this using the image component. [link later]

Background Area Cards

Background Area cards are useful when you need to nest columns or other components within a card.  They also allow a card to be anything other than white, although the use for this should be rare.

Background Area cards also do allow you to have a linked card with more than one link present.  Again, this is not recommended and it's use should be rare and only if unavoidable.

Using the "Classes" tab of the Background Area component - the card can be triggered using the class name of card in the "Additional Classes" field.

card

Within this background area is a text component.

I'd only use the background area vs. a text component card here because of the brown background. This should be rare.

Linked Background Area Cards

You can still create a linked Background Area card if necessary, though it does require additional steps.

You must utilize two classes on the Background Area itself. As well as a class on the text component within that contains the single link you want the card to link to, and that link must be a button.

card linked-card

Within this background area is a text component.

In order to have a linked background area card function correctly, you also need to add a text component within - and that text component must have a class of it's own: linked

This is a second text component which contains the link, as well as has the additional class of

linked

Linked button

A border has been added on these examples to help show a text component with a unique class applied

If the scenario presents itself that you must use a card, and have to present other links, this can be achieved.  The card still requires a single primary button link.  However, additional links can be provided in a separate text component with a class of clickable, so that those links remain clickable within the card that otherwise is entirely clickable to the single button link.

Within this background area is a text component.

In order to have a linked background area card function correctly, you also need to add a text component within - and that text component must have a class of it's own: linked

This is a second text component which contains the link, as well as has the additional class of

linked

Linked button

This is yet another text component, which has additional links that need to remain clickable.

Add the clickable class to this component, and your links within will remain functioning.

clickable

Example 1 | Example 2 | Example 3

A border has been added on these examples to help show a text component with a unique class applied

Updated: 05/26/2023 07:57AM