Skip navigation

Block Library (FY26) GB

Guideline for blocks utilized across eab.com

Accordion Blocks

Accordion blocks should be used to hide certain content, so a user can opt-in to seeing more information about a topic by clicking the accordion drop down. Accordions are also effective in shortening the length of a page and allowing a user to more easily skim a page and view what’s most relevant to them. There is the option to have the first accordion open or closed, the background and accordion colors reversed, and no section title + description (just the accordion itself).

Accordion Option 1 (light) (title is optional)

(Opt. Description) 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.
Optional Link

Title (required)

Description (required). The inside of accordions have the same text formatting options as the text block.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu non sodales neque sodales ut etiam sit amet nisl. Est ante in nibh mauris. Iaculis urna id volutpat lacus laoreet non. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Faucibus vitae aliquet nec ullamcorper sit.

Lorem ipsum

  • Quis commodo odio aenean sed
  • Arcu dictum varius duis at consectetur lorem donec massa sapien
  • Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Accordion Option 2 (dark (title is optional)

(Opt. Description) 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.
Optional Link

Title (required)

Description (required). The inside of accordions have the same text formatting options as the text block.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu non sodales neque sodales ut etiam sit amet nisl. Est ante in nibh mauris. Iaculis urna id volutpat lacus laoreet non. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Faucibus vitae aliquet nec ullamcorper sit.

Lorem ipsum

  • Quis commodo odio aenean sed
  • Arcu dictum varius duis at consectetur lorem donec massa sapien
  • Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Title (required)

Description (required). The inside of accordions have the same text formatting options as the text block.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu non sodales neque sodales ut etiam sit amet nisl. Est ante in nibh mauris. Iaculis urna id volutpat lacus laoreet non. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Faucibus vitae aliquet nec ullamcorper sit.

Lorem ipsum

  • Quis commodo odio aenean sed
  • Arcu dictum varius duis at consectetur lorem donec massa sapien
  • Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Title (required)

Description (required). The inside of accordions have the same text formatting options as the text block.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu non sodales neque sodales ut etiam sit amet nisl. Est ante in nibh mauris. Iaculis urna id volutpat lacus laoreet non. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Faucibus vitae aliquet nec ullamcorper sit.

Lorem ipsum

  • Quis commodo odio aenean sed
  • Arcu dictum varius duis at consectetur lorem donec massa sapien
  • Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

CTA Blocks

CTA blocks come in 3 types: small, large, and global demo forms, and are used in specific places on pages.

Small CTAs

  • Thinner CTA blocks that are used in the middle of content to draw attention to other relevant resources
  • Come in two color options: light and dark
  • Requires title text, description text, button text, and a link

Large CTAs

  • The main CTA placed at the end of a page
  • Can be used on all eab.com pages
  • Comes in one standard color option (dark blue)
  • Requires title text, description text, button text, and a link

Form CTAs (Global Demo Request Forms)

  • Typically used at the end of a page
  • Requires title text and description text
  • Typically used on solutions pages, blogs, landing pages.
  • Must be connected to a specific product line in Marketo

Form CTA (title required)

This version of a CTA appears at the end of a page and must be connected to a product in Marketo. (description required)

Differentiators Block

This block is typically used on solutions pages only to display a brief overview of the product’s benefits. See the “What Sets Enroll360 Apart?” section of the Enroll360 Solution Page for an example. This block can come left or right aligned and has the options for text or number features.

Required elements:

  • Main Title
  • Image (1:1 aspect ratio, 930px x 930px in size) – image will auto-adjust if not in 1:1 ratio, resulting in a compacted visual.
  • Up to 4 subcategories for text option – with titles and description text for each. This does not have a subscription option.
  • Up to 3 subcategories for numbers option – with titles and description text for each. This does have a sub-description option.

Differentiator Opt. 1 – Left (title required)

  • Title 1 (required)

    Description is required

  • Title 2

    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.

  • Title 3

    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.

  • Title 4

    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.

Differentiator Opt. 2 – Right (title required)

  • 100+

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Optional sub-description
  • 50

    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Optional sub-description
  • 25%

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    Optional sub-description

Experts Block

This block can showcase up to three experts on eab.com. Experts must currently have a published bio on the site in order to be included. Expert names, titles, and headshots are all pulled in from their expert bio and cannot be adjusted here.

Required elements:

  • Expert names (up to 3)

Title is Optional

Description is optional.
Link is Optional
  • David L. Felsenthal

    David L. Felsenthal

    Chief Executive Officer
  • Lia Davidson

    Lia Davidson

    Chief Marketing Officer
  • Scott Schirmeier

    Scott Schirmeier

    President, Technology and Partner Development

Fancy Cards Block

This block can be used to call out a variety of topics. It has two card color options: dark and light, and three background colors: dark, light, and patterned. Text and icons can be either left or center aligned and a hover option can be toggled on or off. Links can be added to each individual card. More than three cards can be used in one section, but the block will only allow three cards per row. Text within the cards can be bolded or italicized, but bulleted lists and hyperlinks will not work.

Notes:

  • Cards with the dark background should only use teal icons
  • Cards with the light background can use the blue or teal icons
  • The patterned background should only be used with the light card option
  • There are two options for the hover state: white and cool grey

Required elements:

  • Icon
  • *While not technically required, a card title and description text is strongly recommended for the best visual results

Fancy Cards -Op 1. Light Background (title optional)

This option shows the light background with dark cards. These cards have the hover option toggled on, links assigned to each card, and are left-aligned. (description is optional)
Optional Button
  • Lorem ipsum

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

  • ""

    Lorem ipsum

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

  • ""

    Lorem ipsum

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

Fancy Cards -Op 2. Dark Background (title optional)

This option shows the dark background with light cards. These cards have the hover toggled on (grey), no links assigned to each card, and are center-aligned. (description optional)
  • Lorem ipsum

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

  • “”

    Lorem ipsum

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

  • Lorem ipsum

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

  • ""

    Lorem ipsum

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

Fancy Cards -Op 3. Patterned Background (title optional)

This option shows the patterned background with light cards. These cards are a mix of hover toggled on, links assigned, and are left-aligned. (description is optional)
Optional Button
  • “”

    Lorem ipsum

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

  • “”

    Lorem ipsum

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

  • Lorem ipsum

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

This block is used on landing pages such as focus areas/institution type pages – not recommended for resource pages such as blogs, infographics, etc. Block should have a minimum of 3 resources to display.

Required elements:

  • Slide title
  • Slide description
  • Image
  • Resource link + button text

Features Block

These blocks are widely used on solutions pages, focus area pages, resource centers and institution type pages. This block type is not recommended for use on blogs and other resource pages.

They can be used with or without flair elements, with lottie animations, or embed scripts. Links can also be added to each card. The default is set to left/right alternating text/image orientation. Card can be set as the featured row which applies a light teal background color to the feature instead of the default white/grey background. Image with/without flair elements should be 532x355px (recommended image aspect ratio is 3:2).

Only one graphic type is allowed per block section. You cannot combine static images, Lotties, and embed scripts within one alternating block.

Real page examples:

Required elements:

  • Image (3:2/532x355px), Lottie, or embed script (Youvisit)
  • *Strongly recommended to have a card title and description
Eyebrow (optional)

Card Title (optional) With Flair

Description (optional) – Example with flair element.

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.

Lorem ipsum

Lorem ipsum dolor sit amet

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

Lorem ipsum

Lorem Ipsum (Featured)

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eyebrow (optional)

Card Title (optional) Without Flair

Description (optional) – Example without flair element.

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.

Eyebrow (optional)

Card Title (optional) With Lottie Animation

Description (optional).

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.

This block can showcase up to four experts. Experts must already have a published bio on eab.com before they can be featured in this block. To request a bio, please fill out this form. This block is typically used on solutions pages as a contact call to action. See the Enroll360 Solution Page for a real life example of the block.

Experts info (headshot, title, specialties)  is pulled in directly from their expert bios and cannot be edited. Any changes need to be edited on the expert bio page.

We cannot change text attributes in this block, i.e bold, italic, underlined, etc.

Required elements:

  • up to 4 experts with published bios
  • Overline/eyebrow text
  • *Strongly recommended to have a title and description text

This block is designed to showcase one podcast episode. All information is pulled directly from the podcast page and cannot be edited within the block. This block can be used on resource pages and others a needed.

Required elements:

  • Podcast episode

This block can be used on resource centers and landing pages. There must be four blogs in this block (max + minimum). Blog must be already published to be included.

Required elements:

  • Block title
  • List of published blog to be featured