Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.

Feature Width

These four elements are in a Group and part of the new LAYOUT GRID structure. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Widecontent Group

These two elements are in a Group. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Anchor Left with Feature Width Inner Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab totam tenetur esse, eaque dolor ex hic porro. Inventore odio eum itaque neque, ab quaerat at tenetur qui vero aperiam adipisci!

Anchor Right with Feature Width Inner Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab totam tenetur esse, eaque dolor ex hic porro. Inventore odio eum itaque neque, ab quaerat at tenetur qui vero aperiam adipisci!

100 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

50/50 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

33/66 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

66/33 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

33/33/33 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

50/25/25 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

25/25/50 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

15/70/15 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

25/25/25/25 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 4 with .all-caps

Heading 5

Heading 6

Google font: “Inter” variable font weights

https://fonts.google.com/specimen/Inter

Ultra Thin – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thin – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extra Light – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Normal – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Semibold – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bold – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Black – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Border top class border-top

Not working with new .layout-grid setup- fix later: Border top inline that isn’t full width as above.

Vertical Center Paragraphs or Headings vertical-center goes on the column block as a class and centers content in all columns.

Vertical center dolor sit amet.

Vertical Bottom Paragraphs or Headings vertical-bottom goes on the column block as a class and centers content in all columns.

Vertical bottom dolor sit amet.

Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Semper quis lectus nulla at volutpat diam ut.
Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Link list style applied to the list group: linklist

Horizontal List items: horizontal-list applied to group.

Horizontal List item one
Horizontal List item two
Horizontal List item three

Right nav list. Class: right-nav applied to column

Ordered List class bold-number applied to list

Couldn’t easily get sub items to have letters because WordPress sticks a <ul> inside of a nested <ol>. After messing with it I got it to work manually in editor. It takes selecting and forcing the numbered list.

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
1. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. Somthing else here
Semper quis lectus nulla at volutpat diam ut.
1. And a subitem for two
Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

supheading (above heading) – apply class supheading and subheading (below heading) – apply class subheading

supheading

subheading

Spacers with S, M, L, XL overrides for better responsive spacing.

Small spacer

Medium spacer

Large spacer

Extra Large spacer

Default spacer set at 180px height

border-top style. Applied to above markers for spacers as well.

Extra small text class = extrasmalltext applied.

Small text class = smalltext applied.

Normal size text without a class applied.

Large text class = largetext applied.

Extra large text class = extralargetext applied.

Links

Link in text or paragraph.

A link with arrow span class=”icon-arrow icon-arrow-right show-icon-on-hover” applied. Requires HTML Content block

Icon and Icon circle class applied to icons: .icon and .icon-circle

Align left applied by WordPress block alignment setting

Align center class applied by WordPress block alignment setting

Align right applied by WordPress block alignment setting

Quote style – add class quote-text to this paragraph and quote-author to next paragraph with bold around the author name. Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius.

Author Name Company Name of Author

Modal on page link with most features. Could be a button to launch it as well.

Credits Modal for Footer

FAQ Section

// https://webcloud.se/jQuery-Collapse/

What is Design + Build

Design + Build is a full service construction method where a firm provides both design and construction under a single contract. Unlike traditional construction methods, the designer and contractor are working on the same team and within the same business, allowing for high levels of collaboration and unified recommendations.

Second question goes here

This is the answer to the second question.

Accordion Half Width

Accordion One Heading Here

Accordion Two Heading Here

Accordion Three Heading Here

Full Width Column with alignfull-pad-all applied as class on column wrapper. Otherwise the text content flows to screen edge.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Odio ut sem nulla pharetra. Tempus quam pellentesque nec nam. Tempus iaculis urna id volutpat lacus laoreet. Scelerisque fermentum dui faucibus in ornare. Ac odio tempor orci dapibus ultrices. Enim sit amet venenatis urna cursus eget. Etiam erat velit scelerisque in dictum.

Wide Width Column – Use Feature Width Column typically.
with alignfull-pad-all applied as class on column wrapper. Otherwise the text content flows to screen edge. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Normal separator – edit color in css

Thick separator applied to the separator as a class: thick-separator

Content with _subscript and ^superscript applied.

Pullquote block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
This is a Citation belonging to the pullquote.

Basic table from WordPress blocks

For more complex tables use TablePress plugin.

Header item	Header item	Header item
Test item in table cell	Test item in table cell	Test item in table cell
Test item in table cell	Test item in table cell	Test item in table cell
Test item in table cell	Test item in table cell	Test item in table cell
Test item in table cell	Test item in table cell	Test item in table cell
Test item in table cell	Test item in table cell	Test item in table cell
Footer item	Footer item	Footer item

Caption for table

Clip path hover card

Media & Text

Default Media and Text block included as a base WordPress block.

Shadow Blocks & Flat Block – class applied to column itself or wrapper column

Class shadow-block-single applied to each column in this 66/33 block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Class shadow-block-single in a column next to the first one. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.

Shadow Block Multi

Class: shadow-block-multi Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Shadow Block Multi

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Shadow Block Multi

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Flat block

Applied to this column only: flat-block – not wrapper column. Flat block allow for styling a block to be consistent across the site. Similar to Shadow Block but without the shadow.

Vertical center content from applied style – vertical-center – on column selected under Advanced on right.

Caption for photo with some text that might take up multiple lines depending on width of photo or slider.

Preformatted text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit. 

Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.

Row Block – Base WordPress Block. It creates a flex row (flex-direction: row) for content which ends up looking like columns but the content of each is flexible based on the amount of content. With too many row items it causes horizontal scroll on mobile.

Row Block Base WordPress Block.Lorem ipsum dolor sit amet, consectetur adipiscing

Time needed: 1 day, 2 hours and 10 minutes

Yoast How To Block – adds all schema data to <head> for a how to section to improve SEO

Step one title
Step one description
And more content for step one
Step two title
Step two description with a graphic added.

Float image within a grid layout

Create a Group within WordPress out of blocks with enough blocks selected to wrap text under and around images. Apply: class: remove-from-grid if I need extra details, but otherwise simply adding the conten into a group removes the content from the grid. This removes the styles applied by.

.layout-grid > * {
  grid-column: content;
}

Image caption here that should take about two lines of text or more.

Add the following with plugins and use styling on: https://swissfull.rocquett.com/test/

Modula Photo Gallery
SVG Clip Paths
Table Press tables
Stats Sections

Typography, Blocks, Columns, and Layouts

Feature Width

Widecontent Group

Anchor Left with Feature Width Inner Content

Anchor Right with Feature Width Inner Content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 4 with .all-caps

Heading 5

Heading 6

Google font: “Inter” variable font weights

Vertical center dolor sit amet.

Vertical bottom dolor sit amet.

Modal on page link with most features. Could be a button to launch it as well.

Credits Modal for Footer

FAQ Section

Basic table from WordPress blocks

Media & Text

Shadow Blocks & Flat Block – class applied to column itself or wrapper column

Shadow Block Multi

Shadow Block Multi

Shadow Block Multi

Flat block

Float image within a grid layout

Schedule an Introductory Call