Custom Blocks

Office of Communications & Marketing/Our Brand/The Michigan Engineering Design System: “42”/Custom Blocks

Core Elements & Blocks

  • Typography
  • Colors
  • Quote and Pullquote

Research News Blocks

  • Page title, subtitle, byline
  • Related links
  • Accessible accordion
  • In the News Listing
  • Media Contact
  • Informational alert bar

Core Elements

Typography

Colors

Core Blocks

Quote and Pullquote Blocks

Top: Quote block
Bottom: Pullquote block (also available as a Pattern)

screenshot of the custom designed Quote and Pullquote blocks

Research News Elements

Page title, subtitle, byline

screenshot of research news center post showing design for title, subtitle, byline, and date

Related links

Note: Highlight effect present upon hover

screenshot showing related links design with highlight upon hover

Accordion

screenshot showing the accordion block design with one expanded and the other two closed

In the News Listing

Note: highlight effect occurs upon hover

an in the news listing block wrapped within text in a news post

Media Contact Block

A block so the audience knows who to contact with questions about the story.

media contact block showing information for writer james lynch

Informational Alert Bar

stacked informational alert bars in colors based on type of emergency: red, yellow, and teal