The Maryland Humanities Design Library demonstrates all the available blocks, patterns, and styles within the site. As new blocks, patterns, or styles are added to the theme, they should be documented here so all site editors can use this library as a reference.
- Styles and Settings
- Blocks
- Each content piece in the Block Editor is a block. Think of them as building blocks. They can be assembled and combined to create rich, detailed pages. Most of the blocks in the block library are WordPress core blocks, but some are third-party plugins. Blocks have default styles from the theme, but their appearance can be changed using the block editor.
- Resources to learn more about blocks:
- Text
- Media
- Design
- Patterns
- Patterns are pre-assembled combinations of blocks. The patterns in this library are included with your theme and are based on the site’s design system. You can also create your own patterns to suit your content entry needs.
- Resources to learn more about patterns:
- Call to Action Patterns
- Column Patterns
- List Patterns
- Post / Query Patterns
- Stats Patterns
- Text Patterns
Color Palette
The following color palette is available for use in the Block Editor. See Color Settings overview for detailed instructions on adjusting block colors.
Accessibility: pay close attention to the contrast warning when adjusting Text and Background colors. The editor will check your selections and provide a notification if your foreground / background combination lacks sufficient contrast, but it will not automatically prevent low-contrast combinations.
Brand colors: although the color picker will allow you to select any color, it’s important to use the following brand colors on the site. Familiar branding contributes to usability and helps users feel oriented on the site. Your designer has selected this color palette as part of your site’s visual language. The color picker is pre-populated with this palette for your convenience.
Primary
Primary Darkest
Primary Darker
Primary Dark
Primary Default
Primary Light
Primary Lighter
Primary Lightest
Secondary
Secondary Darkest
Secondary Darker
Secondary Dark
Secondary Default
Secondary Light
Secondary Lighter
Secondary Lightest
Neutral
Neutral Darkest
Neutral Darker
Neutral Dark
Neutral Default
Neutral Light
Neutral Lighter
Neutral Lightest
Neutral White
Neutral True White
Typography
See Typography Settings overview for more details on how you can make typography changes if needed.
Primary Font: Commissioner
Sample Type. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum vehicula nibh in volutpat. Integer laoreet lacinia porta. Nam nec eros et nunc tristique commodo dapibus.
Use for general body type: paragraphs, captions, data tables, etc.
Secondary Font: Unbounded
Sample Type. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum vehicula nibh in volutpat. Integer laoreet lacinia porta. Nam nec eros et nunc tristique commodo dapibus.
Use for accent type: headlines, quotes, etc.
Typography Sizes
The following typography sizes are available for use in the Block Editor:
Text size extra small. Lorem ipsum dolor sit amet.
Text size small. Consectetur adipiscing elit.
Text size medium / default. Nulla consectetur arcu.
Text size large. Ut posuere libero rutrum.
Text size extra large. Donec vel neque vel lectus.
Text size Heading 6. Lorem ipsum dolor sit amet.
Text size Heading 5. Consectetur adipiscing elit.
Text size Heading 4. Nulla consectetur arcu a est laoreet.
Text size Heading 3. Ut posuere libero rutrum.
Text size Heading 2. Donec vel neque vel.
Text size Heading 1. Lorem ipsum.
Text size Heading 1 Large.