DRAFT Resources Overview

To use any of these blocks on your page, change your page template to Gutenberg Template ( must be done in 2 Page Attributes dropdowns seen in the sidebar ).

Block: Hero

The hero block has 2 options, large and basic page hero. The large version is demoed here, the basic version is seen at the top of the page. You can select whether or not to use an h1 (page heading) or an h2 (section heading). The CTA button is optional, and there are background color options available for the Basic Page version.

Large Hero Block

Block: Icon Row

The icon row block includes an introduction block with a WYSIWYG interface, and allows you to add unlimited icon cards. You can choose to start the block with an arrow, or not, and you can choose whether to stack the icon over the text or beside it, or you can use the tiered card version. You can also link the item if desired.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed non pretium quam. Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl. Donec ultrices elementum dui, sit amet tempor mi bibendum et. Duis sagittis erat ut lobortis accumsan. Vestibulum feugiat felis et porta porta. Maecenas faucibus diam quis risus efficitur auctor at eu nisl.

Icon Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Icon Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Block: Bubble Block

As seen on the homepage, the bubble block creates a visual journey for the user with unlimited bubbles.

Sed non pretium quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam. Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl.

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

    Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl. Donec ultrices elementum dui, sit amet tempor mi bibendum et. Duis sagittis erat ut lobortis accumsan. Vestibulum feugiat felis et porta porta.

    Button Text

Block: Logo Grid

The logo grid is optimized to appear below a bubble block and allows for you to add unlimited logos of clients, partners, or vendors.

Sed non pretium quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam. Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl. Donec ultrices elementum dui, sit amet tempor mi bibendum et.

Button Text

Block: Custom Testimonial Slider

This block is for displaying images and testimonials from specific clients. There is no limit, however the block slider requires 4 or more selections to function properly.

Results came back very fast and we are grateful to have updated information! Video Testimonial
Danica Wilson, Development Manager, Gamma Phi Beta Foundation
DonorSearch delivers the best screening results in the industry!
Jennifer Filla, Prospect Research Consultant, Aspire Research Group
Easy to use and excellent quality of data.
Theresa Surber, Advancement Analyst, Millsaps College
Ease in running wealth overlays myself and speed of return when I submit large batches of donors for assessment.
Lisa Wilson, Development Specialist, Unity

Block: Section Title

This block includes an arrow decoration, an orange background and white h2 text. It is ideal for preceding content that does not have a heading or requires a definitive separation between sections.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block: Image + Copy CTA

The image + copy cta affords many options for a variety of results. Three variations are presented here.

Lorem ipsum dolor

Media Left, Copy Left, Normal Container, Video

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Button Text

Media Right, Copy Centered, Reduced Container, Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Button Text
Lorem ipsum dolor

Media Left, Copy Left, Reduced Container, Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Block: Card Columns

Card Columns are unlimited, and can appear on a white or light blue background. These do not have a title included, and it is recommended that you utilize a section title in advance of the block.

Block: List Block

While Gutenberg has a default list block, this custom one includes options for stylized numbers and arrows. There is no limit to the number of bullets you can enter. These do not include a header, so it is recommended that they follow a section heading, or a default Heading block, or another block that includes a heading.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam. Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

    Donec ultrices elementum dui, sit amet tempor mi bibendum et. Duis sagittis erat ut lobortis accumsan. Vestibulum feugiat felis et porta porta. Maecenas faucibus diam quis risus efficitur auctor at eu nisl. Aliquam eget gravida nisl. Sed et maximus eros.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

    1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam. Ut sollicitudin, urna eu sagittis luctus, enim tortor bibendum purus, id vehicula ex nibh tincidunt nisl.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

    2

    Donec ultrices elementum dui, sit amet tempor mi bibendum et. Duis sagittis erat ut lobortis accumsan. Vestibulum feugiat felis et porta porta. Maecenas faucibus diam quis risus efficitur auctor at eu nisl. Aliquam eget gravida nisl. Sed et maximus eros.

Full Width Text Block

This block allows you to add an arrow to the top or bottom, a heading, content, and a cta if desired. It can be stacked on top of like blocks, or similar blocks to create large blue text areas with a variety of looks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pretium quam.

Button Text

Full Width Media Block

This block allows you to include an image or a video as a full width block at a specific ratio. Background videos should be used sparingly as they increase page load.

Other Blocks of Note:

For this demonstration I’ve used the native Heading block, the Paragraph block, and the Spacer block. These blocks can help you add headings, additional content, or tailor the spacing between blocks.