Kitchen Sink of Gutenberg Block Elements

CALS v4 WordPress Block Testing

Kitchen Sink of Elements

Welcome to QA

This kitchen sink of elements page provides examples of the Gutenberg page building blocks that are available in the UW CALS version 4 Theme. Although this is far too much content for a typically designed page, its purpose is to showcase many of the visual design layout options that are possible when combining the theme’s available Gutenberg blocks within the page editor.

This theme has been browser-tested across devices and meets a WCAG 2.0 AA standard.

Open the new Modal

Events Example

Events

(This example dynamically pulls events from Today.wisc.edu events calendar feed)

Sample Quote to call out on a page.

Quote Citation

Podcast embedding Example

Fast Facts Example

(uses cover block + columns block for layout)

Scholarships awarded in 2022-23

enrolled students in 2023-24

Multiple Column Layouts & Button Styles

Column One

Additional information provided here.

Full Library of UW Icons

Browse an easy to navigate interface to display icons that help communicate to your site visitors. Look for the “Icon” Block in the page editor.

Column Three

Dark BG (not dark mode) and button Styles

Carousel Block (Full Width)

Card Layout Example

Card Pattern Layout with Grid Block+Stack

This is the alt text

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

This is the alt text

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

This is the alt text

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

This is the alt text

Card Heading

Quis adipisicing cillum laborum amet cupidatat excepteur. Minim pariatur veniam fugiat deserunt minim non esse velit pariatur reprehenderit magna. Esse incididunt ut occaecat et anim aute nulla.

Bento Box Design Example

(using mix of media+text block and Column blocks)

Environmental Conservation and Climate Resilience

Addressing biodiversity loss and climate change impacts and promoting sustainable land and water management practices to safeguard agricultural ecosystems.

Bioenergy and Bioproducts

Exploring renewable energy sources and bioproducts derived from agricultural and biological resources, aiming to reduce dependence on fossil fuels and promote a sustainable economy.

Basic Life Sciences and Human Health

Investigating fundamental biological mechanisms related to human health, including cell function, nutrition, disease pathways and medical applications.

Alternating Text & Images Example

(using media+text blocks)

Example Heading One

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Example Heading Two

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Example Heading Three

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Ad magna culpa fugiat aute adipisicing elit non aliqua consectetur sint. Eiusmod Lorem laborum ea elit esse culpa Lorem irure amet reprehenderit commodo enim nulla enim.

Cover Block with image

(with fixed background option)

Accordion

Accordion Header Oneexpand_more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, tempora numquam dolorum nisi quam quibusdam saepe minima, magnam, facilis harum alias. Accusantium voluptate unde facere quasi minus repellendus harum consequatur earum. Ex vitae dolores dolorem perferendis est quis saepe impedit.

Accordion Header Twoexpand_more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, tempora numquam dolorum nisi quam quibusdam saepe minima, magnam, facilis harum alias. Accusantium voluptate unde facere quasi minus repellendus harum consequatur earum. Ex vitae dolores dolorem perferendis est quis saepe impedit.

  • List Item One
  • List Item Two
  • List Item Three

Accordion Header Threeexpand_more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, tempora numquam dolorum nisi quam quibusdam saepe minima, magnam, facilis harum alias. Accusantium voluptate unde facere quasi minus repellendus harum consequatur earum. Ex vitae dolores dolorem perferendis est quis saepe impedit.

Accordion Header Fourexpand_more

[This is an example of the two-column list style variant. It will take the bulleted list and re-style it. Block Style Variants can be selected from the Styles options in the Block Settings panel.]

Tabs

Tab One

Sub Heading for Tab One

[ Can use this paragraph block to add section explanation text or other information for the section of links/resources. Or can remove this paragraph block if not needed. ]

Tab Two

Sub Heading for Tab Two

[ Can use this paragraph block to add section explanation text or other information for the section of links/resources. Or can remove this paragraph block if not needed. ]

Tab Three

Sub Heading for Tab Three

[ Can use this paragraph block to add section explanation text or other information for the section of links/resources. Or can remove this paragraph block if not needed. ]

Table Block

Column OneColumn Two
asdfasdfasdfasdf
asdfasdfasdfasdf
asdfasdfasdfasdf