Skip to Main Content
Home /

Custom Blocks

This state template also includes custom blocks that have been created to provide specific content modules for the State of Hawaii agencies.

Home Page Blocks

It is worth noting that the custom blocks on the home page appear slightly differently than they do when brought into other pages of the website. This is because, as mentioned before, the home page is a full width page, whereas other pages have a specific width for the content container.

The following are the custom blocks available for use on the home page:

Large Call to Action

This is a single call to action, meant to emphasize the most important action a user can make on the website. Each of the lettered areas are editable from the block editor.

Example of large call to action block

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text
  • C. Button text and link
  • D. Image
Settings in large call to action block

2 Column Call to Action

This block puts a two-column / two card call to action section on your page. Each of the lettered areas are editable from the block editor.

Example of 2 column call to action block

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text (optional)
  • C. Cards
    • D. Card image
    • E. Card title
    • F. Card description
    • G. Card button
Settings for two column call to action block

3 Column Call to Action

This block puts a three-column / three card call to action section on your page. Each of the lettered areas are editable from the block editor.

Example of three column call to action block

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text (optional)
  • C. Cards
    • D. Card image
    • E. Card title
    • F. Card description
    • G. Card button
Settings for three column call to action block

Small Call to Action

This block allows you to create a small call to action section with a Hawaiian flag background to link to a single call to action. Each of the lettered areas are editable from the block editor, and includes options to change from light to dark mode, change the image in the background of the block, add an optional icon above the title, and edit any of the other text fields and buttons in the block.

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text
  • C. Button
  • D. Color Scheme
  • E. Background Image
  • F. Icon (Optional)

Callout Text Section

This custom block let’s you add a callout with extensive text. You can edit the text using a WYSIWYG editor which allows you to include links and format text (bold, italics, etc.).

Example of callout text section block

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text
Settings for callout text section block

Icon Box Section

This block is a section with icon boxes, each including an icon image, a title, and a link for the specified icon box.

Example of icon box block

Within the block editor you can edit them as follows:

  • A. Title
  • B. Text (optional)
  • C. Icon box sections
    • D. Icon box
      • E. Icon image
      • F. Icon text

You can also add as many icon boxes as you like, up to 9 icon boxes. To add a new icon box just click the “Add an icon” button (G). You can also collapse the existing icon boxes to make the editing experience easier. Just click the toggle switches (F) to either expand/collapse an icon, add a new icon box, or delete the icon box from the block.

Settings for icon box section block

News Archive

With this custom block you can add in a news archive custom block that brings in between 3 or 6 of the most recent news posts from your website. It also allows to display an optional selection of specific news post categories, and if you have featured images set up for your posts, they can be set to display using a toggle switch in the block admin area.

Here are the various parts of the news archive block:

  • A. Section Title
  • B. Optional Description
  • C. Post Archive Cards
    • D. Post Archive Cardf
    • E. Optional Category Name
    • F. Optional Featured Image
    • G. Post Title
    • H. Post Date
    • I. Post Excerpt
    • J. Post Button
  • K. Section Button

The following options are available in the block editor:

  • A. Title
  • B. Description (optional)
  • C. The number of posts to show (3 to 6)
  • D. Category (all, or a specific category selection)
  • E. Featured Image toggle

The posts display in reverse chronological order, with the most recent one in the top left position.

Block Divider

This block provides space and a dividing line that you can use to separate content on the page. It allows for a custom padding on the top and bottom of the colored dividing line.

Here are the parts of the block:

Divider Block - Screen Grab

This block has just one adjustable option, which is the padding:

  • A. Top and Bottom Padding (in pixels)
Divider Block - Options

There is no specific limit for the padding, but generally you shouldn’t need to have more than 50 to 100 pixels of padding above or below.