This theme uses FIXED stuck nav with JS/CSS rather than sticking with Max Mega Menu. Max Mega Menu may make sense for some projects. Adjust as needed. JS applies fixed to main-nav-inner: main-nav-inner fixed

Spacer tests used throughout Swiss demo have a light greybackground so they can be seen. Remove this from .wp-block-spacer: background-color: var(–extra-faint-grey); after Swiss 3 dev is complete.

Block columns have a 1.75em margin applied to outer 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.

Block column margin removed with class: no-bottom-margin. 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.

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.

25/50/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.

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.

Login — Right aligned image with caption inside column

Heading 1

Heading 2

Heading 3

Heading 3 with span set in “edit as HTML on block adjustment”

Heading 4

Heading 4 with .all-caps

Heading 5

Heading 6

Neue Haas Grotesk Display font weights

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.

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

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

Letter Spacing

Letter spacing text here as an example. –letter-spacing-extra-tight: -.045em;

Letter spacing text here as an example. –letter-spacing-tight: -.02em;

Letter spacing text here as an example. –letter-spacing-body: .03em;

Letter spacing text here as an example. –letter-spacing-loose: .05em;

Letter spacing text here as an example. –letter-spacing-extra-loose: .09em;

Letter spacing text here as an example. –letter-spacing-nav:.03em;

Line Height

Line height normal –line-height: 1.5; 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.

Line height tight –line-height-tight: 1.3; 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.

Line height loose –line-height-loose: 1.7; 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.

Border top class border-top

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.

Lorem ipsum 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

<a href="#" class="no-underline">A link with arrow span applied. Requires HTML Content block <svg class="icon-arrow icon-arrow-right show-icon-on-hover"><use xlink:href="#icon-arrow-right"></use></svg></a>

Button test

Border Button Test

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 launch

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. 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.

Testimonial View 1 – needs minor work for responsive adjustment

This is an example testimonial using fake latin filler 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. Lorem ipsum dolor sit amet.

Juan and Betty Alvarez

This is an example testimonial using fake latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Semper quis consectetur adipiscing elit.

Olivia Masterson

Amanda and Fred Jones

This is an example testimonial using fake latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit consectetur adipiscing.

Sarah Martin

Ralph Parsons

Testimonial View 2 - needs minor work for responsive adjustment

Sarah Martin

Amanda and Fred Jones

Ralph Parsons

Juan and Betty Alvarez

This is an example testimonial using fake latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Semper quis consectetur adipiscing elit.

Olivia Masterson

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.

Stats only work on home page unless footerscripts is edited to remove hasClass("home").

Table using TablePress Plugin - complex tables can use this or wpDataTables for importing csv.

wpDataTables has charting capabilities that look to be better than TablePress and cheaper for the Pro plugin.

[table id=1 /]

Table using WP Table built-in block best choice for simple tables - no plugin needed.

Leave as "Default" instead of "Stripes" to use Swiss Theme styles. Edit styles further.

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
Footer item	Footer item	Footer item

Caption for table

Extra Large Spacer - Mobile Friendly

Large Spacer - Mobile Friendly

Medium Spacer

Small Spacer

Default Spacer - 80px height

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. 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.

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.

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
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.

Column without width adjustment.
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.

Embed PDF with Show Embed checked. Show embed would normally be turned off and the link or download button (optional) presented. Select Open in New Tab for the link.

rowLayouts Download

Media & Text

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

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

Stack Block - Base WordPress Block Applies flex-direction: column. Lorem ipsum dolor sit amet, consectetur adipiscing

This stack is aligned right with flex - align-items: flex-end; Other options are left, stretch, and center. Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing

Group Block - use to group blocks if for some reason a column isn't best. Not sure why a column wouldn't be the most typical choice. Image below is part of the group block : https://wordpress.com/support/wordpress-editor/blocks/group-block/

The Group block has many uses. One popular use is to group together a set of columns and add a background color to distinguish it visually. This is a base WP background color applied.

If you find yourself using the same set of blocks together quite frequently, you can group them together and save the Group block as a reusable block. This lets you quickly and easily insert the same set of blocks again all at once, instead of adding each block one at a time.

Time needed: 1 day, 2 hours and 10 minutes

Yoast How To Block - adds all schema data for a how to section to improve SEO