VRT All Paragraph Types

This page displays the different varieties of Paragraph Types (cards) 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. 

CTA cards

Required fields and icon

Button Link

Title field

keyboard-accessible link text only

Uploaded Icon

Title field

Uploaded icon from https://icons.getbootstrap.com/ and "nolink" link

Profile cards

No image style, required fields

Woman in business suit in an office, coworkers in the background

Firstname Lastname

Portrait image style

Woman in business suit in an office, coworkers in the background
Firstname Lastname
Button Link 919 123-4567 person@example.com

id=#B6

Rectangle image style

Woman in business suit in an office, coworkers in the background

Firstname Lastname

person@example.com

Quick Links

Required fields, text style links

All fields

Column Paragraph
Spotlight Paragraph

Which is usually on the home page

Spotlight Paragraph

Which is usually on the home page

Man in suit, in modern office building

id=#B8

Stat Cards, large screen width band

Required fields only

5000

No animation

id=#B9

Required fields only

0

With 5 second animation

All fields

$5000K

No animation

Description field here

All fields

$0K

With 2 second animation

Description field here

Contact cards

All fields

Firstname Lastname

Location Name field
109 E North St
Raleigh, NC 27601
United States

Contact Info field

id=#B10

Required fields

Required fields with address

109 E North Street
Raleigh, ND 27601
United States

Tabs

Tab/Accordion Items

Tab/Accordion Paragraph
View Embed
Current Blog List

Current Blog List

This tab has a view embed in the body and a video card in the sidebar.

id=#B11

This has an event card in the body.

Map and Webform

Webform embed

Indicates required field

id=#B12

Quick Links

Profile Card

Man in suit, in modern office building

Suit Man

Developer 919-123-4567 suit@example.com

Contact Card

Title

Suit Man

Phillips Building
109 E. North Street
Raleigh, NC 27601
United States

Additional info

id=#B13

Dark Text, Light Background

Quick Links

Profile Card

Man in suit, in modern office building

Suit Man

Developer 919-123-4567 suit@example.com

Contact Card

Title

Suit Man

Phillips Building
109 E. North Street
Raleigh, NC 27601
United States

Additional info

id=#B14

Stat Card

$100

in cash

for me

Video Card

March 21, 2024

Video Card

id=#B15

Dark Text, Light Background

Stat Card

$100

in cash

for me

Video Card

March 21, 2024

Video Card

id=#B16

View Embed

View Embed
Current Blog List

Current Blog List

Webform Embed

Indicates required field
Do you need us to add someone as a Website Manager to your website?
Have they already received Website Manager training?

If you are unsure - please contact Liz Vines before continuing.

Status message


If they have not received training yet, please contact Liz.Vines@nc.gov to arrange training. Thank you!

Name of person submitting request
Name and contact of person to add/upgrade
Do you need help with webforms or views?
Is it a design look/feel that you want but can't work out how to do?

(Anything to do with layout, formatting or "how do I...")

Status message


Thank you for reaching out! At this time we ask that you please reach out to the community Teams channel for an answer to a design/formatting question, or check out all the help topics here on Digital Commons!

 

Teams Channel    Digital Commons Help

Is it a new feature you would like to see?

Status message


Great! We love hearing about new ideas and features you are interested in. Please head over to our Teams Spark Channel to let us know all about it!

Teams Spark Channel

Is something now broken that was working?

ie: It was previously working, but now isn't.

Please include as much detail as you can 

Please let us know in as much detail as possible what you are having an issue with and we shall respond accordingly.

id=#B17

Dark Text, Light Background

View Embed

View Embed
Current Blog List

Current Blog List

Webform Embed

Indicates required field
Do you need us to add someone as a Website Manager to your website?
Have they already received Website Manager training?

If you are unsure - please contact Liz Vines before continuing.

Status message


If they have not received training yet, please contact Liz.Vines@nc.gov to arrange training. Thank you!

Name of person submitting request
Name and contact of person to add/upgrade
Do you need help with webforms or views?
Is it a design look/feel that you want but can't work out how to do?

(Anything to do with layout, formatting or "how do I...")

Status message


Thank you for reaching out! At this time we ask that you please reach out to the community Teams channel for an answer to a design/formatting question, or check out all the help topics here on Digital Commons!

 

Teams Channel    Digital Commons Help

Is it a new feature you would like to see?

Status message


Great! We love hearing about new ideas and features you are interested in. Please head over to our Teams Spark Channel to let us know all about it!

Teams Spark Channel

Is something now broken that was working?

ie: It was previously working, but now isn't.

Please include as much detail as you can 

Please let us know in as much detail as possible what you are having an issue with and we shall respond accordingly.