Blurb Block Examples

This page is used for quick tidbits of info, and can be accompanied with an icon, and can be used for clickthrough links.

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks

Optional Pre-title

This text can be used to provide context to the blurb content (white bg)

By design, if the section background color is white, then the cards on the blurbs will be light blue. Alternatively, if the section background color is light blue, then the blurb cards’ background color will be white.

Ghost Button Example

This blurb header uses an H3

This card has a clickthrough link applied to it, and because of this, you can see the red arrow pseudo element, which acts as a visual cue that this is a clickable element. I’m trying to incorporate a little more slight design variation for clickable cards, more to come.

This blurb header uses a paragraph tag with the “h3” class applied to it

Notice, that even though this whole card had a clickable link applied to it, that there is no red arrow pseudo element. This needs to be fixed. It’s because the CSS is targeting an h3.

This blurb header uses a paragraph tag with the “h3” class applied to it

Notice, that even though this whole card had a clickable link applied to it, that there is no red arrow pseudo element. This needs to be fixed. It’s because the CSS is targeting an h3.

Optional Pre-title

H2 – Conversion Focused Header Text for Bottom of Page

Intro-text style friendly text further encouraging the user to choose to take action. Donec mollis hendrerit risus.

Button Ghost Example

Property & Casualty

Risk Transfer

Claims

Automotive Liability

International

Worker’s Compensation

Mergers & Acquisitions

Professional Liability

Cyber Liability Insurance

Captives & Alternatives Risk

Surety Bond Services

Management Liability

Optional Pre-title

This text can be used to provide context to the blurb content (light blue bg)

By design, if the section background color is white, then the cards on the blurbs will be light blue. Alternatively, if the section background color is light blue, then the blurb cards’ background color will be white.

Ghost Button Example

This blurb header uses an H3

This card has a clickthrough link applied to it, and because of this, you can see the red arrow pseudo element, which acts as a visual cue that this is a clickable element. I’m trying to incorporate a little more slight design variation for clickable cards, more to come.

This blurb header uses a paragraph tag with the “h3” class applied to it

Notice, that even though this whole card had a clickable link applied to it, that there is no red arrow pseudo element. This needs to be fixed. It’s because the CSS is targeting an h3.

This blurb header uses a paragraph tag with the “h3” class applied to it

Notice, that even though this whole card had a clickable link applied to it, that there is no red arrow pseudo element. This needs to be fixed. It’s because the CSS is targeting an h3.

Optional Pre-title

We don’t have to include icons if you don’t need them

By design, if the section background color is white, then the cards on the blurbs will be light blue. Alternatively, if the section background color is light blue, then the blurb cards’ background color will be white.

Ghost Button Example

This blurb header uses an H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This blurb header uses a paragraph tag with the “h3” class applied to it

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This blurb header uses a paragraph tag with the “h3” class applied to it

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Optional Pre-title

These blurbs can be very streamlined if you choose

Also, should be pointed out, that there’s no limitation to the number blurb modules you can add. 3 always seems like a good number, but it could be more, like 6, if necessary.

This blurb header uses an H3