Styleguide
Source of truth of this template.

Styles

The following blocks are all of the styles that make up the site.

How To Edit Styles   
Headings
Heading Jumbo
Heading Jumbo
Heading Jumbo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs & Links

Paragraph-bigger

Paragraph

Paragraph-de-emphasized

Paragraph-smaller

Paragraph-tiny

Label
A text link
Buttons & Form Elements
Rich Text Element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

Symbols Library

The following blocks are setup as Symbols that you can access from the Symbols Menu in the Left Sidebar.

How To Add & Edit Symbols   
hero - home
Digital Asset Solutions for

Credit Unions

Our Partner API enables Bitcoin, Ethereum, and other digital asset execution, settlement, and custody to be embedded within your platform.

Get Started
Hero Image - Wide
Hero Image - Wide White BG
gallery 1
gallery 2
gallery 3
gallery 3 with Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - video Right
Webflow

Start Block Library

Tap on the link below to see the Styles & Blocks Library.

Go to library
Section - video Right v2

Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Section - video Right v3
Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - video left

Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - video LEft v2

Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - video LEft v3
Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - slider left
Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - slider right
Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - Image Right with Bullets
Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - Image left with Bullets
Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Feature Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section - Image Right

Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - Image Right with white background

Feature section with White BG

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - Image left

Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - Image left with white background

Feature section with White BG

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Button
Section - text block 1

Notion

Kickoff your landing page designs with the Starter Block Library in Shipwright!

Open in Figma
Section - text block 2

tagline

Quam pellentesque semper aliquam facilisis. In amet lacus risus in ultricies ac massa.

Call to Action
Section - Text 3

Short headline

Call to Action
Section - Text 4
1
Start by checking your upgrade

Porttitor aliquam viverra quis morbi sollicitudin nisi, dictum. Leo eu magna a ut auctor euismod lectus ipsum. In volutpat proin non mi enim viverra nam. Convallis ac eget sed risus augue facilisis. Vel a, tincidunt fermentum velit, purus.

Section - text 5

tagline

Donec et lectus pretium, elementum pellentesque sit aliquam eleifend feugiat.

Pellentesque ipsum posuere consectetur tortor montes, erat convallis est. Elementum arcu lacus purus amet nulla nulla nibh.

Section - text 6

tagline

Donec et lectus pretium, elementum pellentesque sit aliquam eleifend feugiat.

Pellentesque ipsum posuere consectetur tortor montes, erat convallis est. Elementum arcu lacus purus amet nulla nulla nibh.

Section - text block 7

Donec et lectus pretium, elementum pellentesque sit aliquam eleifend feugiat.

Pellentesque ipsum posuere consectetur tortor montes, erat convallis est. Elementum arcu lacus purus amet nulla nulla nibh.

Section - text 8

Quam pellentesque semperis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - text 8 - White BG

Quam pellentesque semperis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - text 9

Molestie suspendisse aliquam

Odio arcu placerat

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - text 9 - white BG

Molestie suspendisse aliquam

Odio arcu placerat

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - text 10
Feature section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

Login
Section - Paragraph 1

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - Paragraph with list

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - Paragraph with list with icons

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - Paragraph 2

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Diam massa dolor nisl, hendrerit. Mauris tellus velit arcu venenatis. Aliquam vel arcu adipiscing suspendisse elementum, vel enim enim. Sed aliquam a commodo faucibus tortor in. Eget iaculis tellus morbi molestie. Arcu vivamus morbi quam arcu porta.

Section - Paragraph 3
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - Paragraph 4

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - Paragraph 5
label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Section - Paragraph 6

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere."

Section - Paragraph 7

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere."

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Section - 3 Features

a game-changer

Let's get this party started!

Notion

Consult the Webflow knowledge base in Notion on first steps to get you started in Webflow.
Open Notion

Figma

Sync your new web project with Shipwright to access the Starter Block Library.
Open Figma

Webflow

Create a new blank project or use one of Webflow's starter projects to start building with this library.
Watch Video
Section - 2 Cards

Getting started

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

The card images have fit set to cover, so they fill their masking container without stretching. Don’t forget to set an alt description for each image, which will help with accessibility.

This is a button

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Section - 3 Cards

3 Cards section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

This is a button

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Section - 4 Cards

4 Cards section

Vitae vel magna donec neque commodo aliquam, ultrices enim vitae. Dictum diam integer maecenas nulla bibendum quis mattis id. Auctor leo commodo a etiam ultrices odio ornare.

The card images have fit set to cover, so they fill their masking container without stretching. Don’t forget to set an alt description for each image, which will help with accessibility.

This is a button

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Section - Testimonials 1
Name Surname
This is some text inside of a div block.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Name Surname
This is some text inside of a div block.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Name Surname
This is some text inside of a div block.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Section - Testimonials 2
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Name Surname
This is some text inside of a div block.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Name Surname
This is some text inside of a div block.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Name Surname
This is some text inside of a div block.
Table - 7 Columns
Table -  7 Column
Name
Price
Change
Market Cap
Trade
Data Item 5 (5)
Data Item 6 (6)
Bitcoin  BTC
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
Category
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
Category
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
Category
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
Category
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
1,000,000
Contact

Contact us

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Our offices
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.
OUR OFFICE
908 Broadway,
San Francisco,
CA 94133
WORKING HOURS
9AM - 3PM, Mon to Fri
CONTACT
contact@business.com
01 (650) 658 6822
CTA

get started

Open a business account today

Increase revenue with the industry-best blockchain trading and custody infrastructure for your business and customers.

Sign Up Now
footer - basic
footer - Smart (CMS READY)
Navigation - Sticky Nav
Navigation - Smart (CMS READY)