Breaking News Banner Component

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

As of: 8:26 AM, 5/4/24

Page Titles (like above "Full Width Components") are limited to 40 characters before they wrap to a second line.

This is our collection of Full Width Components. Many of them can be used with our Original Components as well.

Accordion

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Accordion Title

Accordion Specifications

Text:
Headline: Suggested character count is 25
Body: (copy that shows when accordion is expanded): No limit

Font Size:
Headers 13px bold
Body 13px regular

Button:
Not designed to have a button, but could be added via HTML if needed.

Options:
Closed state or expanded
Optional icon use

Special Notes:
This component is often used to house a table or long blocks of text.
For the best user experience, it's best to use less than 8 accordions per page
Component will stack with a built in margin when used on top of each other

Icon Accordion

Sample Icon Accordion Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More View Less

Sample Icon Accordion Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More View Less

Icon Accordion Specifications

Text
Headline: Suggested 25 Characters
Body Copy: No limit
Font color: Both headline and body copy is black

Icon
Icon is optional
SVG on transparent background - 500px width x 500px height
Larger more noticeable icon than "accordion component"

Expandable "body"
Includes View More’/’View Less’ expandable
Can display text in a closed or expanded style
Can support table/chart/image within body

Component Notes:
Component will stack without margin when stacked with another icon accordion

Image Size
350 x 267 – Responsive (3 column, 3-Up)
Note: There are variable height options or you can use the original set size above

Colors & Font
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Dark Blue #0079C1 or Grey #666666
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Dark Grey #666666

Text Count:
Headline Max Characters: 45
Body Copy Max Characters: 150

Design Options:
Optional Div bar : 580 x 13 in #B3B3B3
If Div bar present, must be on all descriptors in row
Available in 2, 3, 4 across

Outline Options:
No outline, drop shadow or a 1px stroke option

Button
GREEN OUTLINE
Button: 148 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
Green #639D36

SOLID GREEN
Button: 148 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 148 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

SOLID BLUE
Button: 148 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

ARROW IN BLUE OR GREEN
Button: 14 x 14 30 Degree Solid Triangle
CTA: Open Semi-Bold (20pt) [Title Case]
Blue #0079C1 | Green #639D36

DESCRIPTOR Specifications for Mobile

Size
375 x 550 – Responsive (1 column)
Note: There are variable height options or you can use the original set size above

Colors & Font
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Dark Blue #0079C1 or Grey #666666
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Dark Grey #666666

Text Count:
Headline Max Characters: 45
Body Copy Max Characters: 150

Design Options:
Optional Div bar : 580 x 13 in #B3B3B3
If Div bar present, must be on all descriptors in row
Available in 2, 3, 4 across (on mobile this will be one at a time)

Outline Options:
No outline, drop shadow or a 1px stroke option

Button
BLUE OUTLINE
Button: 148 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

SOLID BLUE
Button: 148 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

GREEN OUTLINE
Button: 148 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
Green #639D36

SOLID GREEN
Button: 148 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

ARROW
Button: 14 x 14 30 Degree Solid Triangle
CTA: Open Semi-Bold (20pt) [Title Case]
Blue #0079C1 | Green #639D36

FAQ Block

FAQs

Consumers Energy

Sample FAQ 1 Title

Sample FAQ 2 Title

Sample FAQ 3 Title

Sample FAQ 4 title

FAQ Block Specifications

Text

Header: 36px regular
Subhead: 18px bold
Body: 18px regular
Color: #000000 (Black)
Green Headline: Around 35 characters
Green CTA: Around 15 characters
Accordion Header: Around 25 characters
Accordion Copy: Around 80 characters

Heading Alignment

Heading can be left or center aligned, independently of the button

Button - Desktop

Ability to add an optional CTA button.
Button Color: Solid primary green button only

Button Alignment - Desktop

Button can be left or center aligned, independently of the heading

Button - Mobile

Button floats to top, under headline, on mobile devices
Option to not show button on mobile devices

Accordion

Uses accordions to display information
Less than 10 accordions is recommend

Feature - Block

Lorem ipsum dolor sit

Button Link

Lorem ipsum dolor sit amet

Link Text

Lorem ipsum dolor sit amet

Link Text

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link Text

Footer: 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

Feature Block Specifications

Button:
Ability to turn on or off the primary button

Button Controls and Color Options:
Options:
Solid Green

Text:
Green Headline: Around 30 characters
Green CTA: Around 20 characters
Header: Around 30 characters
Body Copy: Around 200 characters
Footer Copy: Around 230 characters

Icons:
Ability to use font awesome or jpg/png graphics
Icon is left align only, does not center

Links:
Ability to turn on or off

Footer:
Defaults to off but has the ability to turn on.

Feature - Mod 50/50

Headline

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

Learn More

Headline

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

Learn More

FEATURE Block Mod Specifications for Desktop 50/50

Image Size
592 x 500 – Responsive (2 column, ½ span)
359 x 500 – Responsive (3 column, ⅓ span)

Colors & Font
WITH WHITE OVERLAY
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Black #000000

WHITE BLACK OR BLUE OVERLAY
Headline: Open Sans Bold (27pt/30pt line height)
White #FFFFFF
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
White #FFFFFF

Text Count:
Headline Max Characters - 45
Body Copy Max Characters – 140

Design Options:
Image can be either on the left or the right with copy block on the opposite side.
Gradient overlay (if needed)
Black #000000 100% - 0%
Blue #0C659A 75% - 0%
White #FFFFFF 100% - 0

Button
GREEN OUTLINE
Button: 148 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID GREEN
Button: 148 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White ##FFFFFF

BLUE OUTLINE
Button: 148 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button:148x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White ##FFFFFF

FEATURE Block Mod Specifications for Mobile

Size
359 x 500 – Responsive (1 column)

Colors & Font
WITH WHITE OVERLAY
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Black #000000

Button
GREEN OUTLINE
Button: 327 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID GREEN
Button: 327 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 327 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button: 327 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

Feature - Double

Sample Feature Title

Double Feature Specifications

Text

Headline: 30 Characters
Body Copy: 55 Characters
Subhead 15px bold
Body 14px regular
Color defaults to black
Additional colors for header and body available

Textbox Alignment Options

Has the option to left align, right align, or center align text in the text box
Text boxes stack on top of each other on mobile

Image controls

Text dictates the height of the image on desktop if it exceeds 450px tall.
Defaults to have an image but able to turn off
Image minimum height 450px
Image size proportions on mobile are square

Button Options

CTA button available if needed

Background Colors on text boxes

Defaults to light green but can choose other options
#E4FEE4
#ffffff
#DCF6FF
#E5E5E5
#666666

Feature - Triple

Sample Feature Title

Triple Feature Specifications

Text

Headline: 40 Characters
Body Copy: 65 Characters
Subhead 15px bold
Body 14px regular
Color defaults to black
Additional colors for header and body available

Textbox Alignment Options

Has the option to left align, right align, or center align text in the text box
Text boxes stack on top of each other on mobile

Image controls

Defaults to have an image but able to turn off
Image minimum height of 350px
Image size proportions on mobile are square

Button Options

CTA button available if needed

Background Colors on text boxes

Defaults to light green but can choose other options
#E4FEE4
#ffffff
#DCF6FF
#E5E5E5
#666666

Feature - Full Width

The Power of Change Starts Here

Small, meaningful changes to how we use energy can make a big impact by saving money, helping to preserve Michigan’s natural beauty and improving energy reliability. On this page, you’ll find:

DIY tips to help you save money
Some easy steps to get you started
Ways to make a bigger impact and save even more

To qualify for new home rebates all homes must be inspected by a Certified RESNET Home Energy Rater

Headline

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis

praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident

Nam libero tempore, cum
soluta nobis est eligendi
optio cumque nihil impedit quo minus
quod maxime placeat facere possimus

FULL WIDTH FEATURE Specifications for Desktop

Image Size
925 x 430 – Responsive (Full Span - Single Column Only)

Colors & Font
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Black #000000

Text Count:
Headline Max Characters - 80
Body Copy Max Characters - 150

Design Options:
Option to add video
Image can be either on the left or the right with copy block on the opposite side.
Optional Div bar: 430 x 13 #B3B3B3
Option to change white background to Grey #F8F8F8

Button
GREEN OUTLINE
Button: 148 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
Green #639D36

SOLID GREEN
Button: 148 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 148 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

SOLID BLUE
Button: 148 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

FULL WIDTH FEATURE Specifications for Mobile

Size
359 x 500 – Responsive (Full Span - Single Column Only)

Design Options:
Optional to add video
Image can be either on the left or the right with copy block on the opposite side.
Optional Div bar: 450 x 7 #B3B3B3
Option to change white background to Grey #F8F8F8

Button
GREEN OUTLINE
Button: 327 x 48
Green Outline (4pt) Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
Green #639D36

SOLID GREEN
Button: 327 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 327 x 48
Blue Outline (4pt) Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

SOLID BLUE
Button: 327 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
v White #FFFFFF

Hero

A Force for Michigan and the Communities We Serve

We are a Force for Michigan. We invest in creating positive change in our hometowns through corporate giving and our foundation — all while employing thousands of Michiganders.

Grants and Funding

HERO Specifications for Desktop

Image Size
Desktop: 1440 x 400 – Responsive (Full Span - Single Column Only)
Mobile: 455 x 423 – Responsive (Full Span - Single Column Only)

Colors & Font
WITH WHITE OVERLAY
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Black #000000

Design Options:
Image can be either on the left or the right with copy on the opposite side.
Gradient overlay (if needed)
- Black #000000 100% - 0%
- Blue #0C659A 75% - 0%
- White #FFFFFF 100% - 0%
Font Color Options:
- Font color can be either white or black depending on background.

Button
GREEN OUTLINE
Button: 148 x 48
Green Outline Only (4pt) #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID GREEN
Button: 148 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

WHITE OUTLINE
Button: 148 x 48
White Outline (4pt) Only #FFFFF
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID WHITE
Button: 148 x 48
White Fill Only #FFFFF
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

BLUE OUTLINE
Button: 148 x 48
Blue Outline Only (4pt) #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button: 148 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

HERO Specifications for Mobile

Size
423 x 455 – Responsive (Full Span - Single Column Only)

Colors & Font
WITH WHITE OVERLAY
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height
Black #000000

Design Options:
Image can be either on the left or the right with copy on the opposite side.
Gradient overlay (if needed)
- Black #000000 100% - 0%
- Blue #0C659A 75% - 0%
- White #FFFFFF 100% - 0%
Font Color Options:
- Font color can be either white or black depending on background.

Button
GREEN OUTLINE
Button: 327 x 48
Green Outline Only (4pt) #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID GREEN
Button: 327 x 48
Green Fill Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

WHITE OUTLINE
Button: 327 x 48
White Outline (4pt) Only #FFFFF
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button: 327 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 327 x 48
Blue Outline Only (4pt) #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID WHITE
Button: 327 x 48
White Fill Only #FFFFF
CTA: Open Sans Bold (15pt) [Title Case]
Blue #0079C1

Icon Vertical

Icon Vertical Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button:
Can be used with or without button
Option to drop button in mobile. (Carrot will appear on the right hand side of the component instead.)
Supports primary green button only

Special Note:
Component can support only one link/CTA button
Best used with a link/button and not text only

Image Rollover

Neque porro quisquam

Image Rollover Specifications

Text:

Header copy: Around 35 characters

Design:

Max of 4 in a row
Headers are links
Component supports up to 8 links, divided into 2 rows

Behavior

Links out to other pages or anchors links down the page

Image size and controls

Size: 150px x 150px
Upload areas for rollover images

Alignment options

Left align a row or center

Background colors

Defaults to grey
Can change to other colors

Info Card

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a dui fringilla, semper lacus quis, hendrerit diam. Morbi velit elit, auctor nec leo nec, molestie dignissim lacus.

View Link Text Here

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a dui fringilla, semper lacus quis, hendrerit diam. Morbi velit elit, auctor nec leo nec, molestie dignissim lacus.

Ask Me Later

View Link Text Here

Info Card Specifications

Card Color:

Default to White
Can choose any color we desire

Card controls:

Default to corner radius of 4
Can adjust to radius of 0

Background Options:

No background behind cards, no extra padding in the container
Background color behind card that adds 16px of padding around the parameter of the card container
Can pick any background color that we desire
Default color: #E5E5E5

Text Color:

Default Subhead #000000
Default Body #666666

Text Sizing:

Desktop Subhead - Open Sans SemiBold 18px
Mobile Subhead - Open Sans Regular 14px
Desktop Body - Open Sans SemiBold 18px
Mobile Body - Open Sans Regular 14px

General padding:

No padding in-between components

Inner Padding:

16px all the way around all content

Variable Width controls:

Will fit to either all columns, 6 columns, 2 columns, or 4 columns

Toggle for height:

Variable height depending on content
Even / min-height on boxes so they can match heights in a row based on the box with the highest amount of text
Min-height controls automatically switch to variable height around content for mobile

CTA:

Toggle on
Toggle off
Anything 8 columns or less the button is full width of card container
Anything more than 8 columns button is width of text
Default primary button

Can add as many link buttons as we would like
Ask me later or close option on link buttons

Button Options:
Primary Button
Link
Full width button
variable size button

Button Controls:

Corner radius of 6
Left, right, or center aligned

Icon:

Mobile size small 35px x 35px
Mobile size large 90px x 90px
Desktop 12 col 80px x 80px
Desktop 4 col, Desktop 6 col 80px x 80px

Button Alignment:

Can left align, right align, or center align buttons

Links:

Ability to add links in body text

If an action is triggered on a link to close out of a card:

Desktop - Box disappears, 4 column cards turn into 6, 6 column cards turn into 12
Mobile - Box disappears, rest of page content shifts to fill space.

Multi-Tips Block

Neque porro quisquam est qui

Neque porro

Neque porro quisquam

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Neque porro quisquam

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Neque porro quisquam

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Neque porro quisquam

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Neque porro quisquam

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

Multi-Tips Block Specifications

Icon

Typical icon use is with a checkmark, but can support other icons
Can use any font awesome 5 icon
Can use an uploaded jpeg, png and svg
150px x 150px for jpegs

Text

Header: 36px regular
Subhead: 18px bold
Body: 18px regular
Color: #000000
Green Headline: Around 35 characters
Green CTA: Around 15 characters
Tip Header: Around 75 characters
Tip Copy: Around 180 characters
Accordion Header: Around 25 characters
Accordion Copy: Around 80 characters

Button

Default is solid primary green button
Option for solid primary blue button
Option to not have a button if CTA is not needed

Button Alignment

Button can be left justified or center justified, independently of the subhead
Subhead can be left justified or center justified, independently of the button

Mobile button alignment

Option to float CTA button both above or below tips on mobile devices

Alignment

Button can be left justified or center justified, independently of the subhead
Subhead can be left justified or center justified, independently of the button
New line of optional body text can be left justified or centered

Tip number

Can support 3 or more tips

Tip Columns

Can support 1 or 2 columns

Column Span

Default to 12 columns
Option to span 10 columns with an offset of 2

Accordion

Can support an accordion component under tips if needed

Paragraph Block

Sample Paragraph Block Title

Sample Link Text

Sample Accordion Title

Paragraph Block Specifications

Text
Header: 36px regular
Subhead: 18px bold
Body: 18px regular
Color: #000000
Green Headline: Around 35 characters
Green CTA: Around 15 characters
Accordion Header: Around 25 characters
Accordion Copy: Around 80 characters

Button
Default is solid primary green button
Option to not have a button if CTA is not needed

Button and Heading Alignment
This component supports left justification only

Accordion - Optional
Can support an accordion component under body copy if needed

Photo Ad

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

PHOTO AD Specifications for Desktop

Image Size
1440 x 570 – Responsive (Middle Span - Single Column Only)

Colors & Font
LIGHT IMAGE
Headline: Open Sans Bold (27pt/30pt line height) [Title Case]
Max Characters – 65
Black #000000
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Max Characters – 140
Black #000000

DARK IMAGE
Headline: Open Sans Bold (27pt/30pt line height)
Max Characters – 55
White #FFFFFF
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Max Characters – 100
White #FFFFFF

Design Options:
Image can be either on the left or the right with copy on the opposite side.
Optional Gradient overlay (if needed)
[Light Image]: Yellow #FFE6AE 36% - 0%
[Dark Image]: Black #000000 100% - 0%
Font Color Options:
Font color can be either white or black depending on background.

Button
SOLID GREEN
Button: 148 x 48
Dark Green Fill #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button: 148 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

GREEN OUTLINE
Button: 148 x 48
Dark Green Outline Only #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 148 x 48
Blue Outline Only (4pt) #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

PHOTO AD Specifications for Mobile

Size
300 x 425 – Responsive (Middle Span - Single Column Only)

DARK IMAGE
Headline: Open Sans Bold (27pt/30pt line height)
Max Characters – 55
White #FFFFFF
Body Copy: Open Sans Semi Bold (14pt/18pt line height)
Max Characters – 100
White #FFFFFF

Button
SOLID GREEN
Button: 327 x 48
Dark Green Fill #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

SOLID BLUE
Button: 327 x 48
Blue Fill Only #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

GREEN OUTLINE
Button: 327 x 48
Dark Green Outline Only (4pt) #639D36
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

BLUE OUTLINE
Button: 327 x 48
Blue Outline Only (4pt) #0079C1
CTA: Open Sans Bold (15pt) [Title Case]
White #FFFFFF

Square Navigation

Lorem Ipsum

Neque porro quisquam est qui dolorem

Excepteur sint occaecat

Onsectetur, adipisci velit, sed quia non numquam

Lorem ipsum dolor sit

Eos et accusamus et iusto odio dignissimos ducimus

Finibus Bonorum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Square Navigation Specifications

Text:

Subhead - Around 20 characters max
Body text - Around 60 characters max
Subhead 20px Open Sans Bold
Body text 14px Open Sans Regular

Links:

Can link out to other CE pages, as well as anchor link down the page.
Whole box is clickable
As a rule only 1 link per box

Background Container:

Defaults to grey
Can change to any CE brand standard hex color

Square Boxes:

Default:
- Fill white #ffffff
- No stroke
- Drop shadow X0 Y0 Blur4 Spread0 Color #000000 25%
- On hover: Drop Shadow X0 Y0 Blur8 Spread0 Color #000000 40%
- Max of 4 in a row
- Can add a 1px stroke
- Can change fill or stroke to any CE brand standard hex color

Alignment:

Defaults to centered
Options to left align

Stackable Panel

Neque porro quisqum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link One Goes Here Link Two Goes Here Link Three Goes Here

Neque porro quisqum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link One Goes Here Link Two Goes Here Link Three Goes Here

Full Width Stackable Panel Specifications for Desktop

Image Size
1440 x 445

Text
Header: 27px
Body: 16px
Header copy: Around 50 characters
Body copy: Around 200 characters
Green link CTAs: Around 40 characters

Design Options:
Image can be either on the left or the right with copy block on the opposite side.
Ability to add or remove background images, inline images next to text and inside of text blocks.
Option to add solid color backgrounds behind text boxes.
Ability to change background images to inline images on mobile devices.
Ability to add multiple clickable CTA buttons, and multiple button options.

Button Controls and Color Options:
Ability to add as many buttons and CTAs as wanted
Options:
Solid Blue
Solid Green
Outlined Blue
Outlined Green
Solid White
Outlined White
Ability to toggle buttons on and off and swap out different incidents of them. (Solid blue, outlined green with transparent center etc.)
Ability to use a simple text link

Full Width Stackable Panel Specifications for Mobile

Text

Header
Tablet: 27px
Phone: 20px

Body
Tablet: 16px
phone: 14px

Design Options:
Inline images will stack above content

Tabs

Tab 1
Tab 2

Neque porro quisqum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link One Goes Here Link Two Goes Here Link Three Goes Here

Neque porro quisqum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link One Goes Here Link Two Goes Here Link Three Goes Here

Don’t See Your Issue Here?

Our team is here to help you with any other issues you may have. Reach out by calling 800-477-5050.

Give Us a Call

Tab Specifications for Desktop

Design Options:

Container below expands vertically as components are added inside of it.
Any components works inside of the tabs.
Any info above the tab component will remain static
The container always spans the full width of the page
Only one tab can be selected at one time
There can be a maximum of 4 and a minimum of 2 tabs

Tab Color Options:

Text:

Tab Header Max Characters - 20

Unselected colors default to grey:

Background #CECECE
Text #666666

Selected colors default to blue:

Background #0079C1
Text #FFFFFF

Additional option for green selected buttons:

Background #639D36
Text #FFFFFF

Testimonial

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

First Name Last Initial

– City, MI

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Testimonial Specifications

Suggested Maximum Characters

Body Copy: 300 Characters

Component Notes

Background Color Options: tertiary-blue, quaternary-blue, tertiary-green, quaternary-green, primary-gray, secondary-gray, tertiary-gray
Font Color Options: black-text, primary-gray-text, quinary-gray-text, white-text
Must have consent from person providing the quote (see Legal for appropriate consent form)

Use Case

A customer or business testimonial for Consumers, a program etc.

Sticky Bar Footer

Sticky Bar Footer Specs

Text:

Body copy: Around 40 characters
CTA: Around 15 characters

Sticky Bar Footer Component Desktop View

CTA Goes Here

Sticky Bar Footer Component Mobile View

Breaking News Banner Component

Example Heading

Full Width Components

Table of Contents

Accordion Specifications

Sample Icon Accordion Title

Sample Icon Accordion Title

Icon Accordion Specifications

Headline

Headline

Headline

Headline

Headline

Headline

Headline

Headline

Headline

DESCRIPTOR Specifications for Desktop

DESCRIPTOR Specifications for Mobile

FAQ Block Specifications

Feature Block Specifications

Headline

Headline

FEATURE Block Mod Specifications for Desktop 50/50

FEATURE Block Mod Specifications for Mobile

Sample Feature Title

Sample Feature Title

Double Feature Specifications

Sample Feature Title

Sample Feature Title

Sample Feature Title

Triple Feature Specifications

The Power of Change Starts Here

Headline

FULL WIDTH FEATURE Specifications for Desktop

FULL WIDTH FEATURE Specifications for Mobile

A Force for Michigan and the Communities We Serve

HERO Specifications for Desktop

HERO Specifications for Mobile

Icon Vertical Heading

Icon Vertical Heading

Icon Vertical Heading

Icon Vertical Heading

Icon Vertical Heading

Icon Vertical Specifications

Neque porro quisquam

Neque porro quisquam

Neque porro quisquam

Neque porro quisquam

Neque porro quisquam

Neque porro quisquam

Neque porro quisquam

Image Rollover Specifications

Lorem Ipsum

Lorem Ipsum

Info Card Specifications

Multi-Tips Block Specifications

Paragraph Block Specifications

Headline

PHOTO AD Specifications for Desktop

PHOTO AD Specifications for Mobile

Lorem Ipsum

Excepteur sint occaecat

Lorem ipsum dolor sit

Finibus Bonorum

Square Navigation Specifications

Neque porro quisqum

Neque porro quisqum

Neque porro quisqum

Neque porro quisqum

Full Width Stackable Panel Specifications for Desktop

Full Width Stackable Panel Specifications for Mobile

Neque porro quisqum

Neque porro quisqum

Neque porro quisqum

Neque porro quisqum

Don’t See Your Issue Here?

Tab Specifications for Desktop

Testimonial Specifications

Suggested Maximum Characters