Buttons | Colors | Headers | Images | Lists | Multimedia | Full Width Elements | Custom Blocks

BUTTONS

COLORS

Blue
#2D3E94

Dark Blue
#0A1653

Dark Red
#7D1912

Red
#B43618

Orange
#D6470C

HEADERS

H3 Level Three Header (Orange)

Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac.

H4 Level Three Header (Blue) link

Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac.

H5 Level Three Header (Orange)

Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac.

H6 Level Three Header (Black)

Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac.

IMAGES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel odio. In vitae vehicula tortor, at aliquam augue. Nunc aliquam elit libero, a facilisis nibh posuere et. In auctor nibh ac purus bibendum, in posuere libero molestie. Integer dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel odio. In vitae vehicula tortor, at aliquam augue. Nunc aliquam elit libero, a facilisis nibh posuere et. In auctor nibh ac purus bibendum, in posuere libero molestie. Integer dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam.

Left aligned placeholder image at full size with caption and duotone filter!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel odio. In vitae vehicula tortor, at aliquam augue. Nunc aliquam elit libero, a facilisis nibh posuere et. In auctor nibh ac purus bibendum, in posuere libero molestie. Integer dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare. Morbi viverra dolor in rhoncus accumsan. Nam facilisis quam ac congue aliquam. Aenean elementum, odio quis semper cursus, neque nisl tincidunt libero, sit amet vestibulum magna sapien vel.

Full width placeholder image with caption.

Cover Image with Parallax Effect

LISTS

Unordered List (Bulleted)

  • Lorem ipsum dolor sit amet, consectetur. Adipiscing elit. Aliquam fermentum leo a urna.
  • Vel mattis lacus ornare. 
  • Morbi viverra dolor in rhoncus accumsan. 
  • Nam facilisis quam ac congue aliquam.


List with class for custom bullets:
colorful-list 

  • Aenean elementum, odio quis semper cursus.
  • Neque nisl tincidunt libero, sit amet vestibulum. 
  • Magna sapien vel odio. In vitae vehicula tortor.
  • At aliquam augue. Nunc aliquam elit libero.

Ordered List (Numbered)

  1. Lorem ipsum dolor sit amet, consectetur. Adipiscing elit. Aliquam fermentum leo a urna.
  2. Vel mattis lacus ornare. 
  3. Morbi viverra dolor in rhoncus accumsan. 
  4. Nam facilisis quam ac congue aliquam. 


List with class for custom numbers: colorful-list 

  1. Aenean elementum, odio quis semper cursus.
  2. Neque nisl tincidunt libero, sit amet vestibulum. 
  3. Magna sapien vel odio. In vitae vehicula tortor.
  4. At aliquam augue. Nunc aliquam elit libero.

MULTIMEDIA

H3 Video Block

H3 Audio Block

FULL WIDTH ELEMENTS

BLOCK – PULLQUOTE: Full width, default style.

It highlights a piece of content ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum leo a urna convallis, vel mattis lacus ornare.

Optional caption viverra dolor in rhoncus accumsan. 

BLOCK – COVER IMAGE: Full Width

Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac. Aenean dapibus neque ac pellentesque congue. Phasellus lorem lacus, ornare ut odio in, accumsan consequat massa. Cras justo purus, rutrum eu nisi sed, varius fringilla justo.

Use this custom class to preserve the global margins within the cover image block: container

GROUPED BLOCKS: Full Width (with color applied to the group)

(Used for Intro Paragraphs)
Nunc posuere quis urna sed faucibus. Donec eget nibh imperdiet, rhoncus mauris non, blandit mi. In sagittis feugiat eros, sit amet facilisis lectus faucibus ultrices. Duis congue risus quam, sed venenatis magna vehicula ac. Aenean dapibus neque ac pellentesque congue. Phasellus lorem lacus, ornare ut odio in, accumsan consequat massa. Cras justo purus, rutrum eu nisi sed, varius fringilla justo.

Use this custom class to preserve the global margins within the cover image block: container

CUSTOM BLOCKS

CUSTOM BLOCK: Card Image + Text with card link

Shown in 2 column format. Custom class applied [to the columns]: even-column-dark-red

CUSTOM BLOCK: Slider on Scroll Down

How do we build an abolitionist society?

What is the relationship of capitalist extraction to the climate crisis?

What can we learn from cooperatives and solidarity economies?

CUSTOM BLOCK: Two Column Text + Slider with Fadeout

Call to Action Text: Join us for public programming and artistic offerings as we explore these fundamental questions together.

CUSTOM BLOCK: Zoom in Animation

Skip Animation

How do we journey from injustice to justice?

CUSTOM BLOCK: Featured News

CUSTOM BLOCK: Horizontal Scroll

CUSTOM BLOCK: Upcoming Featured Events

CUSTOM BLOCK: Featured Resources

CUSTOM BLOCK: Update Featured on News Page

CUSTOM BLOCK: Media Featured on News Page

Test Heading (css classes: home-who-we-are last-block)

Top

Stay Connected

Mapping Visions for Transformative Change
Name*