VRT Article Cards

This page displays the different varieties of Article Card available on the Digital Commons platform. It serves as a baseline for visual regression testing when code is deployed to the platform. Note that not every combination shown is desirable or a best practice. This band is set to Full Width Content and Background.

Image as Background

Height 270px

240px

Not dark and with a much longer link text

With a description

February 14, 2025

See how easy it is to create a little tree right in your world.

id=#B2

The band below is set to Full Width Content and Background, and has different H levels in the links. They should appear to be the same size. The custom card height is ineffective in this band.

June 14, 2023

H2 Link text

This Article Card has a description, a link, no media, no background color, and a published date.

June 14, 2023

H3 longer link text than on the other cards

Description, long link, no media, Accent background color, and a published date.

June 14, 2023

H4 Link text

This Article Card has a description, a link, no media, Dark background color, and a published date.

June 14, 2023

H5 Link text

210px height

id=#B3

Description field and very long link, different H styles

Column 1 Title

This is a really long link that is going to wrap to a second line if not more.

This Article Card has a description, a link, no media, no background color. H2.

Column 2 Title

This is a really long link that is going to wrap to a second line if not more.

This Article Card has a description, a link, no media, Accent background color. H3.

Column 3 Title

This is a really long link that is going to wrap to a second line if not more.

This Article Card has a description, a link, no media, Dark background color. H4.

Column 4 Title

This is a really long link that is going to wrap to a second line if not more.

This Article Card has a description, a link, no media, Light background color. H5.

id=#B4

Description field and Link, Description Background color. Column heading H3

Column 1 Title

This is the link text

This Article Card has a description, a link, and no media. No description background, 240 px. H4 link.

Column 2 Title

This is the link text

This Article Card has a description, a link, and no media. Dark description background, 240 px. H5 link

Column 3 Title

This is the link text

This Article Card has a description, a link, and no media. Light description background, 240 px. H3 link.

Column 4 Title

This is the link text

This Article Card has a description, a link, and no media. Accent description background, 240 px. H2 link.

id=#B5

Description field and Link, Description and Card Background color.

Column 1 Title

This is the link text

This Article Card has a description, a link, no media, defaults on headings. No background.

Column 2 Title

This is the link text

This Article Card has a description, a link, no media, defaults on headings. Dark description, light card background.

Column 3 Title

This is the link text

This Article Card has a description, a link, no media. Light description and accent card background.

Column 4 Title

This is the link text

This Article Card has a description, a link, no media. Accent description and dark card background.

id=#B6

Use more padding

Bands with both band titles and column titles may need more padding to prevent them overlapping each other vertically. Try medium or large padding.

Description field, image

Person looking at the tablet screen with group of people on the background

This is a link

This Article Card has a description, a link, an image, no background color.

This is a link

This Article Card has a description, a link, an image, Accent background color.

May 1, 2023

This is a link

This Article Card has a description, a link, an image, a date, Dark background color.

April 25, 2023

This is a link

This Article Card has a description, a link, an image, a date, Light background color.

id=#B7

Description field, image as background

This is a link

June 14, 2023

This Article Card has a description, a link, an image, no background color, and a published date.

This is a link

June 14, 2023

This Article Card has a description, a link, an image, Accent background color, and a published date.

Link text

June 14, 2023

This Article Card has a description, a link, an image, Dark background color, and a published date.

Link text

June 14, 2023

This Article Card has a description, a link, an image, Light background color, and a published date.

id=#B8

Manual card heights

this is the link text

Description, image as background, link, card height 300px.

this is the link text

Description, image as background, link, card height 240px

this is the link text

Description, image as background, link, card height 300px, Light background dark text

this is the link text

Description, image as background, link, card height override 150px, dark background

id=#B9

Full width band, all fields

June 14, 2025

This is the link text

Description, a link, media, Dark description background color.

id=#B10

Same card with different text length

Dalmation puppy sitting in a field with dandelions

This is a link

In your world you can create anything you desire.

This is a link

In your world you can create anything you desire. You can create anything that makes you happy.

This is a link

In your world you can create anything you desire. You can create anything that makes you happy. See how easy it is to create a little tree.

This is a link

In your world you can create anything you desire. You can create anything that makes you happy. See how easy it is to create a little tree. You can spend all day playing with mountains.

id=#B11

3 columns, all fields

March 24, 2023

Link text

Accent background color, dark card color

Link text

March 24, 2023

Image as card background, light background color.

$1000 jr.

Surprise

A statistic card added to the mix