What's new
This card is expandable, with related content inside

This descriptive text here should be a teaser to what's below. When you click "see more," a card will expand, revealing more content. 

See More
This item should pertain to your main CTA

The image—and this description text—are optional.

Here's the call to action
fitness-heart-rate
This is a link to related content

The icon is optional. Here is an optional description of the link.

settings-human
Here is another link

Make all three links look balanced: if one has a description, give them all descriptions.

rating-star-bubble-1
And here is one more link

Up to three links are optional.

Expanding content is not required

It's possible to simply have cards with direct links and no expandable content. Direct link text should be a max of 30 characters.

This is a direct link
Headings here should be a maximum of 65 characters. In quam tincidunt.

This text should be a maximum of 150 characters. Suspendisse eu ligula. Duis arcu tortor, suscipit eget, imperdiet, imperdiet massa at iaculis, ipsum.

See More
Optional subhead max 50—description also optional.

A maximum of 120 characters is ideal in this description. Ut non enim eleifend pret feugiat. Quisque rutrum. Sed lectus.

video-player-1
Links can be URLs, videos or files

Sub-link descriptions should be a max of 110 characters. Inut quamoniae. Nullam curabitur atlacusac ornaretum.

common-file-text
Nam at tortor in tellus mordid

Praesent adipiscing. Namic quam nunc, blandit velo, luctus pulvinar, hendrerit id, lorem. 

Expandable cards a.k.a. the "What's New" component

(View the example above)

The Expandable Cards component is used on the transamerica.com homepage and is generally referred to as the "What's New" component. It contains three items of news that are cycled out on a frequent basis. If you're looking to add news to this component, keep in mind that it will only remain there for a maximum of three weeks.

Items in the What's New component can be displayed either as a self-contained news item, with only a headline, description and link, or as expandable cards which can contain additional content, including links and an image. View the example above for a sample of how this component can be used. Read more below for detailed information about content requirements.

Anatomy

  1. Title
    • Maximum of 65 characters
  2. Description
    • Maximum of 150 characters
  3. Link
    • When an item in the What's New component is expandable, this text says "See more" and is not customizable.
    • When the item is not expandable, this link needs to be customized. 
    • Text should be a descriptive action for the user to take.
    • Max 25 characters.
    • Can link to URLs, videos or files
  4. Image
    • To avoid undesired cropping, the image must be a 2:1 ratio in size. 
    • Minimum 720px × 360px
    • Images cannot contain any text.
  5. Sub-title
    • Optional
    • The sub-title—as well as the associated image, description and link—must be related to the un-expanded content above.
    • Max 50 characters
  6. Sub-description
    • Maximum of 120 characters
  7. Link
    • Max 30 characters.
  8. Sub-link
    • 1-3 sub-links are optional
    • Sub-links should have a relationship to the content above them
    • Icons are optional
    • Maximum 30 characters
    • Can link to URLs, videos or files
  9. Sub-link: Description
    • Sub-link descriptions are optional.
    • Create visual balance: if one sub-link has an icon or description, make sure all of them do.
    • Max 110 characters
  10. Sub-link: Icon
    • Select from the Drupal icon library or provide a custom SVG file