VRT Article Card Examples

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.

Column 1 Title

This is a link

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

id=#B3

Column 2 Title

This is a H2 link

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

Column 3 Title

This is a H5 link

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

Column 4 Title

This is a link

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

Link text

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

id=#B1

Link text

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

Link text

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

Link text

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

June 14, 2023

Link text

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

id=#B2 This is the column's text field.

June 14, 2023

Link text

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

June 14, 2023

Link text

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

June 14, 2023

Link text

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

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.

id=#B4

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.

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.

id=#B5

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.

Column 1 Title

This is the link text

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

id=#B6

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=#B7 Bands with both band titles and column titles may need more padding to prevent them overlapping each other vertically. Try medium or large padding.