Example blocks and components

This page has a variety of example blocks and components used within HarvardSites WordPress, starting with a horizontal rule.

Example of a text block with a heading, paragraph, and list

This is a paragraph block wrapped in a text block. The text block wraps around the text elements as a container to control the width and color scheme.

  • This is a list item
  • Another list item

Vertical cards example with images

Vertical cards example without images

In HarvardSites WordPress, we have developed a collection of custom WordPress blocks using Harvard Web Publishing’s design system. Browse the available blocks to add content and build out your pages.

Example of a set of 50/50 cards

HarvardSites WordPress

HarvardSites WordPress is Harvard Web Publishing’s WordPress offering powered by CampusPress. The platform is centralized and accessible, and empowers site builders to create and duplicate complex page layouts on Harvard Web Publishing’s design system using the block editor.
Learn more about HarvardSites WordPress

HarvardSites WordPress

HarvardSites WordPress is Harvard Web Publishing’s WordPress offering powered by CampusPress. The platform is centralized and accessible, and empowers site builders to create and duplicate complex page layouts on Harvard Web Publishing’s design system using the block editor.
Learn more about HarvardSites WordPress

Example of post list

You can use this block to display recent announcements or other recent posts from your site.
All news

News story
Vestibulum eu odio. Fusce vulputate eleifend sapien. Curabitur a felis in nunc fringilla tristique. Duis lobortis massa imperdiet quam. Vestibulum fringilla pede sit amet augue. Cras dapibus. Fusce neque. Donec venenatis vulputate lorem. In turpis.…

Recent Announcement
Phasellus consectetuer vestibulum elit. Vestibulum eu odio. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vivamus laoreet. Nunc sed turpis. Pellentesque posuere. Donec venenatis vulputate lorem. Quisque id mi. Duis arcu tortor,…

Press Release
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod, arcu ac pharetra pharetra, neque metus scelerisque velit, tempus facilisis est enim at libero. Nullam non placerat risus. Suspendisse potenti. Proin a ex non urna rutrum efficitur…

Example of a hero

Faculty of Arts & Sciences
An about statement about your academic group, project, or department.
About Us

Example of second hero slide

Faculty of Arts & Sciences
An about statement about your academic group, project, or department.
Call to action

Accordion heading

Sed fringilla mauris sit amet nibh. Curabitur blandit mollis lacus. Aenean vulputate eleifend tellus. Aliquam erat volutpat.

Simple Table example

Header oneHeader twoHeader threeHeader fourHeader five
12345
678910
1112131415
1617181920

Call to action links

Here is where you would have a set of buttons or links
Link text A button-style link

Button style cards

Donec sodales sagittis magna. Curabitur at lacus ac velit ornare lobortis. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Aenean imperdiet. Integer tincidunt.

Card one
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

Card two
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

Card three
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

Images block example

Optional captions can go on any of the images