Cedar - Kitchen Sink

Kitchen Sink

Dark Hero

Dark version of the hero block.

The hero block is a two-column section typically placed at the top of a page, although it can work well as a content block too. Layout consists of some text on the left, an image on the right, and some secondary text and images at the bottom.

Link to Content Link to elsewhere
Dark version of the hero block.
Secondary section with logos – use white or very light logos
Light Hero

Light version of the hero block.

The hero block is a two-column section typically placed at the top of a page, although it can work well as a content block too. Layout consists of some text on the left, an image on the right, and some secondary text and images at the bottom.

Contact Us Link to Elsewhere
Light version of the hero block.
Secondary section with logos – use color/darker logos
0%
Percentage block is good for showing relevant stats
0%
Numbers automatically count up to specified value
0%
Background and text color can be changed
Introductory Block

An Introduction with a Large Headline

This block is tailored to come after a hero block and before some more detailed content. It supports an image with the option of adjusting its maximum size, as well as the option to adjust the top and bottom margins for optimal placement between different content blocks. Background and text color can also be edited by using the color pickers at the bottom of the editor block.

Infographic Block
The infographic block can be used to add a row of images and descriptive text.
Add One, Two, or More
There isn't a limit to how many blocks you can add, but thee to four will look best.
Background and Text
Colors for background and text can be edited via the color pickers in the block editor.
Split Hero

This one is pretty cool

This block is intended for use with multimedia items, particularly video. Default layout is image left and text right, with the option to reverse it to text left and image right.

Contact Us
Split Hero

This is a pretty versatile block

Here’s a version with a horizontal video and updated background/text colors. While it’s pretty versatile, there are other blocks better suited to general content. Those will be outlined in the coming blocks below.

Contact Us
Split Hero

Alternative Layout and Colors

Here’s a version using a horizontal image superimposed in a laptop mockup with a white background. Note that choosing a custom color for the background overrides the color of the whole section.

Contact Us
Split Hero

One last example

Here’s a tablet orientation video using default image left, text right layout.

Video Block

CTA Banner

Full Width CTA Banner

This is the default CTA banner, full width with a light green background. Options include a CTA button that can link to an internal page or external website, an embeddable form such as a HubSpot email subscription, left/center/right alignment, and an image.

Contact Us
Full Width CTA Banner
CTA Banner

Boxed Width with Orange Background

Alternative style to the full width green CTA, this one works well with pages that have a lot of white space. Has the same options as the full width CTA regarding alignment and images.

Contact Us
Boxed Width with Orange Background
CTA Banner

Center Aligned with Subscribe Form

Here's a center-aligned version with the email subscribe form and no image.

General Content Block

General Content

One or Two Columns

Image: Male with glasses and badge

This block has a fair amount of options: one or two columns, headshot/icon images above main text, larger images below main text, and link buttons.

Contact Us
Second Column

Add headshots, images, and links

Image: Female Nurse with badge

Add additional descriptions, images, and buttons as needed. Background and text color can also be changed using the color picker in the block editor.

Request a Demo
General Content

Here's a one-column version

One column general content with customized colors and image.

Two Column CTA

First Column

First column text. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Second Column

Second column text. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vertical Tabs

  • Tab one

    There is no limit to the number of tabs, but any more than four will be harder to navigate on smaller screens.

    Tab one
  • Tab two

    Multiple vertical tab blocks can be on the same page without conflict.

    Tab two
Tab one
Tab two

Second Vertical Tab Section

Second section tab one
Second section tab two

Featured Case Study

Case Study Eyebrow

Featured Case Study Title

Featured case study description. This section has a couple of variations with background color that also affect the color of the numbers and headings in the dark blue panel. Try to keep the stats at two or three, as more than that will be too cramped.
65%
Three stats can fit here and not look weird
28%
Two generally looks better
87%
But three will work
Featured Case Study Title

Explore Products Block

Link One
This section can have any number of these linked blocks.
Contact Us
Link Two
The blocks will resize, and up to four blocks can work without looking awkward.
Request a Demo
Link Three
At smaller screen sizes, the blocks will stack, and odd numbers will be centered.
Cedar Pay

Accordion Row One

Like the vertical tabs, multiple instances of this accordion block can work on the same page without conflicting.

Accordion Row Two

These rows will expand to the size of the content within. There isn’t a limit to how much content you can add, but there is a limit to where it starts to look odd.

Second Accordion

Just showing it won’t conflict with the accordion appearing earlier on the page.

Second Accordion Two

Second row of the second accordion.

Request Demo

This block is basically a fully featured contact us page.

This block contains everything you would need to make a contact page.

Your subtitle here ...

34%
Add a couple percentages
68%
To add some significance
This block is basically a fully featured contact us page.
Some Logos
Contact Form
This section adds a series of quotes with attributions below.
Bob Jones
There's no limit, but two to three quotes should be sufficient.
Jane Q. Smith
Background color can be customized.
Roquefort Throckmorton
Title

Firstname Lastname

Lorem ipsum dolor sit amet, consectetur adipisicing 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

Firstname Lastname

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.