Aperture Styleguide

All sections and styles are shown here. You can copy and paste them when building your pages.

Some sections are available as webflow symbols that you can drag n drop into place. Then either unbind form the symbol to edit it or use the symbol override fields

Version 1.0
Butterfly woman

Hero Section 2

This hero section can hold much more text than the parallax hero above.

Version 1.0

Hero Section 3

Subtitle Text

Hero 4 Symbol

Hero Section 4

Subtitle Text

Hero 4 Symbol

Hero Section 4

Subtitle Text

Hero 4 Symbol

Typography

Fluid Fonts

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

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

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.

H2 Heading

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

  • Duis cursus, mi quis viverra ornare
  • Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet
  • 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.

H3 Heading

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

  1. Duis cursus, mi quis viverra ornare
  2. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet
  3. 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.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse var

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

H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Typography

Fluid Fonts

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

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

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.

H2 Heading

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

  • Duis cursus, mi quis viverra ornare
  • Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet
  • 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.

H3 Heading

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

  1. Duis cursus, mi quis viverra ornare
  2. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet
  3. 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.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse var

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

H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rich Text Section Symbol

Rich Text

This section is available as a webflow symbol and has override fields for you to edit the content.

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.

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.

  • ljlkj
  • lkjlkjh
  • ljkhlkjlkhlkj
  1. kggljhlkhk
  2. kjhlkjh
  3. kljhlkjhlk
Image caption

Rich Text Negative Section Symbol

Rich Text

This section is available as a webflow symbol and has override fields for you to edit the content.

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.

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.

  • ljlkj
  • lkjlkjh
  • ljkhlkjlkhlkj
  1. kggljhlkhk
  2. kjhlkjh
  3. kljhlkjhlk
Image caption

Image Section

Images

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

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

Image Section Negative

Images

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

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

"Callout sections that demand your attention"

Sign up to our newsletter to receive awesome tips and tricks

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sign up to our newsletter to receive awesome tips and tricks

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sign up to our newsletter to receive awesome tips and tricks

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Callouts can be Rounded and you can switch the top and bottom colors

Sign up to our newsletter to receive awesome tips and tricks

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Image Card Symbols

Cards

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

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Image Card Symbols

Cards

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

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Primary

by Somebody

Stats Grid of Stats Grid Cells

Stats

55%

Conversion rate

256%

increase

100%

Fluid Typography

15%

Time to build

55%

Conversion rate

256%

increase

100%

Fluid Typography

15%

Time to build

Feature Card Symbols

Cards

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

Fluid typography

All text scales smoothly from the smallest mobile to the largest 8k monitor

Styleguide

Our comprehensive styleguide makes it quick and easy to build your site

Light & Dark Sections

All sections have a light and dark variant

Section Dividers

SVG based section dividers work out of the box or simply create your own.

Reusable Symbols

Symbols with overridable fields are provided

CMS Collections

Blogs, Categories and Team Member collections

Buttons & Link Buttons

Light and dark variants of square and round buttons in three sizes. Which all scale fluidly

Forms

All the standard webflow form fields

Tabs

Styled tabs to organise your content

Sliders & Lightboxes

Slider and lightbox examples to copy

Feature Card Symbols

Cards

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

Fluid typography

All text scales smoothly from the smallest mobile to the largest 8k monitor

Styleguide

Our comprehensive styleguide makes it quick and easy to build your site

Light & Dark Sections

All sections have a light and dark variant

Section Dividers

SVG based section dividers work out of the box or simply create your own.

Reusable Symbols

Symbols with overridable fields are provided

CMS Collections

Blogs, Categories and Team Member collections

Buttons & Link Buttons

Light and dark variants of square and round buttons in three sizes. Which all scale fluidly

Forms

All the standard webflow form fields

Tabs

Styled tabs to organise your content

Sliders & Lightboxes

Slider and lightbox examples to copy

Team Cards

Cards

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

Elody Crooks

Elody Crooks

Senior Developer

Barney Murray

Barney Murray

Founder & CTO

Haylee Kuphal

Haylee Kuphal

Managing Director

Alan Ward

Alan Ward

CEO

Glennie Hauck

Glennie Hauck

Office Manager

Sadie Nolan

Sadie Nolan

CFO

Mellie Fritsch

Mellie Fritsch

Sales Executive

Barney Murray

Barney Murray

Founder & CTO

Alan Ward

Alan Ward

CEO

Sadie Nolan

Sadie Nolan

CFO

Elody Crooks

Elody Crooks

Senior Developer

London Roberts

London Roberts

Founder

Alan Ward

Alan Ward

CEO

Leonora Krajcik

Leonora Krajcik

Marketing Manager

Mellie Fritsch

Mellie Fritsch

Sales Executive

Barney Murray

Barney Murray

Founder & CTO

London Roberts

London Roberts

Founder

Glennie Hauck

Glennie Hauck

Office Manager

Buttons

Forms

You can use either a Button element or a Link element to assign the Button class.

By default we display a white button with black text. To change to a black button with white text simple use the Button Negative combo class.

You should always use the Buttons div wrapper which aligns things nicely.

Button round

Buttons

Button largeButton large
Button defaultButton default
Button smallButton small

Buttons Round

Button largeButton large
Button roundButton round
Button smallButton small

Text Links

Text LinkText Link
Text LinkText Link
Text LinkText Link

Text Links Round

Text LinkText Link
Text LinkText Link
Text LinkText Link

Icon & Text Link Blocks

Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block

Icon & Text Link Blocks

Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block

Buttons

Forms

You can use either a Button element or a Link element to assign the Button class.

By default we display a white button with black text. To change to a black button with white text simple use the Button Negative combo class.

You should always use the Buttons div wrapper which aligns things nicely.

Text Link

Buttons

Button largeButton large
Button defaultButton default
Button smallButton small

Buttons Round

Button largeButton large
Button roundButton round
Button smallButton small

Text Links

Text LinkText Link
Text LinkText Link
Text LinkText Link

Text Links Round

Text LinkText Link
Text LinkText Link
Text LinkText Link

Icon & Text Link Blocks

Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block

Icon & Text Link Blocks

Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block
Text Block

Colors

Swatches

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

Primary

#d32323

Grey-50

#fafafa

Grey-700

#616161

Grey-900

#212121

Colors

Swatches

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

Primary

#d32323

Grey-50

#fafafa

Grey-700

#616161

Grey-900

#212121

Slider

Images

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

Chair dreaming of life

Slider

Images

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

Chair dreaming of life

Lightbox

Images

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

Lightbox

Images

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

All Tabs

Tabs

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

Tab 1
Tab 2
Tab 3

Tab 1

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.

Tab 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 3

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.

Tabs

Tabs

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

Tab 1
Tab 2
Tab 3

Tab 1

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.

Tab 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 3

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.

All Forms

Forms

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

All Forms

Forms

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Contact us

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Contact us

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon Links Grid

Icons

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

Simple Horizontal Rule

Section Dividers

Ragged Top 1
Ragged Bottom 1

Section Dividers

Ragged Top 2
Ragged Bottom 2

Section Dividers

Ragged Top 3
Ragged Bottom 3

Section Dividers

Ragged Top 4
Ragged Bottom 4

Section Dividers

Ragged Top 5
Ragged Bottom 5

Section Dividers

Wave Center Top
Wave Center Bottom

Section Dividers

Wave Left Top
Wave Left Bottom

Section Dividers

Wave Right Top
Wave Right Bottom

Section Dividers

Wave Far Left Top
Wave Far Left Bottom

Section Dividers

Wave Edges Top
Wave Edges Bottom

Section Dividers

Wave Far Right Top
Wave Far Right Bottom

Section Dividers

Wave Center Right Top
Wave Center Right Bottom

Section Dividers

Wave Center Left Top
Wave Center Left Bottom

Section Dividers