Educating leaders. Creating knowledge. Serving society.

Home > Design elements library

Design elements library

The following Gutenberg blocks are available for creating advanced page designs. Many blocks contain additional customization options (backgrounds, hover effects, zooms, animations, etc.) as well as component elements that can be turned on or off (title, excerpt, image, etc.) on a per-use basis. Blocks can be used on their own, or in a row with one or more columns; widths of columns and standalone blocks are broadly adjustable. In addition to blocks, Gutenberg pages also can display a featured image/video/gallery above the title, just like Classic pages.

Advanced Text (Kadence)

Section title (H2 through H6)

Paragraph

Text, in individual paragraphs. Images, videos and other elements can be wrapped in on the left or right.

List

  • Item 1
  • Item 2
  • Item 3

Image

Campanile framed by golden leaves
Optional caption; photo linked to popup via .coeblock-popup on Kadence Row Layout block’s Section container. (Photo credit)

Advanced Image (Kadence)

Campanile framed by golden leaves

Row Layout (Kadence)

Column 1

Column 2

Column 3

Spacer/Divider (Kadence)

Advanced Button (Kadence)

Button 1 Button 2 Button 3

Accordion (Kadence)

Text for the first accordion tab.

Text for the second accordion tab

Tabs (Kadence)

Each tab can contain any combination of blocks, including layout blocks that hold other content blocks. Through anchor tags, you can create URLs to link to and open a specific tab on a page.

It’s like getting two (or more) pages for the price of one.

Tabs have their own display setting options (background, spacing, border, typography) and several prebuilt overall options which can then be modified.

Tables

Table Block (WP core)

HEADERCOLUMN 1COLUMN 2
Stuff456789
Other stuff2,0003,000
Still more stuff4.560.789
Optional table caption

Advanced Table block (PP), sortable via Table Sorter plugin

HeaderColumn 1Column 2
Data345678
Big data1,4452,001
Data bits3.210.00005

Events (from Campus Calendar feed)

Gravity Forms

Gravity Forms demo

Info Box (Kadence)

Icon option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More
Oski giving a thumbs-up

Image option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Testimonial (Kadence)

  • “Best thing since drinking through an eyehole!”

    Then again, maybe imbibing through a long plastic tube in the middle of a public event is kinda gross. I’ll have to think some more about that.
    Oski Bear
    Beverage master

Image Overlay + Modal link (both Kadence)

Cal bear silhouette

Grrrrr

Who let the bears out?

Icon List (Kadence)

  • List item one
  • List item two
  • In addition to basic lists, we can specify different bullet icons
  • … and colors, and sizes

Icon (Kadence)

Countdown (Kadence)

  

Count Up (Kadence)

Title text

Post Grid/Carousel (Kadence)

(in grid, masonry or slider layouts)

Fund Future Engineers on Big Give

Published
One Day. Big Impact. From student-led innovation to world-class faculty and facilities, your support keeps us at the forefront of excellence. Donate to Berkeley Engineering during our 24-hour Big Give—from 9 p.m. March 11 to 9 p.m. March 12—to help us unlock Big Matches and maximize your impact. Shape future visionaries. Donate today!

Support Berkeley Engineers Today

Published
In this time of growing uncertainty, your support is needed more than ever. Support Berkeley Engineering today and your gift will be matched dollar-for-dollar to ensure continued excellence and the advancement of engineering education and research. Click here to donate.

Split Content (Kadence)

Dean Tsu-Jae King Liu

Title for split block

Any kind(s) of content block can be used in this section

Modal (Kadence)

Icon factoid (pattern)

#

Descriptive caption for factoid

Call to action button

Video (ARVE)

Audio

Image gallery

Kadence Advanced Gallery

  • Anne Mayoral prepares activity kits for curbside pickup
    Anne Mayoral, Girls in Engineering program director, center, prepares activity kits for curbside pickup by camp participants and parents on Saturday, June 13. (Photo by Adam Lau/Berkeley Engineering)
  • Girls in Engineering staff prepare activity kits for curbside pickup
    Girls in Engineering staff prepare activity kits for curbside pickup by camp participants and parents on Saturday, June 13. (Photo by Adam Lau/Berkeley Engineering)
  • Chris Myers teaches campers to build prosthetic hands
    Chris Myers, CITRIS Invention Lab manager, leads a hands-on, building activity for Girls in Engineering summer campers via Zoom on Tuesday, June 16. (Photo by Adam Lau/Berkeley Engineering)
  • Chris Myers teaches campers to build prosthetic hands
    Chris Myers, CITRIS Invention Lab manager, teaches Girls in Engineering campers how to build cardboard prosthetic hands via Zoom on Tuesday, June 16. (Photo by Adam Lau/Berkeley Engineering)
  • Anne Mayoral hosts campers on a live Zoom tour
    Anne Mayoral, Girls in Engineering program director, chats with campers via Zoom outside American Steel Studios in Oakland on July 14. (Photo by Adam Lau/Berkeley Engineering)
  • Anne Mayoral hosts campers on a live Zoom tour
    Anne Mayoral, Girls in Engineering program director, hosts campers on a live Zoom tour inside American Steel Studios in Oakland on July 14. (Photo by Adam Lau/Berkeley Engineering)

Image slider

Soliloquy

[soliloquy id=’23000′ type=’gutenberg’]

Kadence Advanced Slider

    Caption/label overlay if desired

Kadence Advanced Gallery (carousel)