Additional notes on this theme and pattern set can be found on Penpot.

Ask Steph to be added as a team member.

Overline

Brief heading

Consider using this if you need to provide more context on why you do what you do. Be engaging. Focus on delivering value to your visitors.

Overline

Brief heading

Consider using this if you need to provide more context on why you do what you do. Be engaging. Focus on delivering value to your visitors.

Title

Subtitle below

words etc

etc

Simple text section

Subtitle below primary title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum aliquam diam mattis suscipit. Morbi rutrum, turpis sit amet consequat varius, nunc dui imperdiet ante, vel ornare lectus orci a nisl. Cras sit amet dolor a dui faucibus consequat. Etiam id nulla efficitur, imperdiet metus sit amet, sagittis est. Fusce a hendrerit lectus. In laoreet justo in egestas euismod. Nulla neque erat, aliquet nec pellentesque a, lobortis a nibh. Suspendisse mollis nisi mi, consectetur dignissim mi tempor at. Mauris ac rhoncus elit.

Mauris sed justo ac mauris scelerisque ornare vel at nulla. Integer euismod semper vestibulum. Aliquam non turpis sit amet urna feugiat blandit in eget ipsum. Donec consectetur pretium eros. Proin pellentesque, est vitae pellentesque suscipit, massa elit ornare risus, non lobortis nisi libero ut orci. Sed efficitur congue enim, at semper augue ultricies sit amet. Duis efficitur quam eget enim hendrerit mollis. Morbi iaculis, nunc quis tincidunt finibus, massa leo semper massa, eget iaculis ligula enim quis nulla. Quisque non tellus nibh. Maecenas vel urna dapibus, aliquet nisi id, cursus nibh. Nulla sed libero vel lorem gravida eleifend. Duis quis risus a ante ornare dapibus et eget quam. Aliquam at orci id turpis feugiat auctor in at nibh. Phasellus tincidunt risus at interdum placerat. Donec gravida sapien at risus aliquam, ut venenatis nibh pharetra.

Second simple text section

Subtitle below second simple text section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum aliquam diam mattis suscipit. Morbi rutrum, turpis sit amet consequat varius, nunc dui imperdiet ante, vel ornare lectus orci a nisl. Cras sit amet dolor a dui faucibus consequat. Etiam id nulla efficitur, imperdiet metus sit amet, sagittis est. Fusce a hendrerit lectus. In laoreet justo in egestas euismod. Nulla neque erat, aliquet nec pellentesque a, lobortis a nibh. Suspendisse mollis nisi mi, consectetur dignissim mi tempor at. Mauris ac rhoncus elit.

Mauris sed justo ac mauris scelerisque ornare vel at nulla. Integer euismod semper vestibulum. Aliquam non turpis sit amet urna feugiat blandit in eget ipsum. Donec consectetur pretium eros. Proin pellentesque, est vitae pellentesque suscipit, massa elit ornare risus, non lobortis nisi libero ut orci. Sed efficitur congue enim, at semper augue ultricies sit amet. Duis efficitur quam eget enim hendrerit mollis. Morbi iaculis, nunc quis tincidunt finibus, massa leo semper massa, eget iaculis ligula enim quis nulla. Quisque non tellus nibh. Maecenas vel urna dapibus, aliquet nisi id, cursus nibh. Nulla sed libero vel lorem gravida eleifend. Duis quis risus a ante ornare dapibus et eget quam. Aliquam at orci id turpis feugiat auctor in at nibh. Phasellus tincidunt risus at interdum placerat. Donec gravida sapien at risus aliquam, ut venenatis nibh pharetra.

Button

Accordions

Standard

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Alternative

Not used often, use when the standard looks awkward for what you are doing

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Dark Background Accordions

Standard

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Alternative

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Lists

  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
Write a short headline

Various 3-4 packs

It’s common to highlight 3-6 things on a website home page. Sometimes they link out to other pages on the site like a chapter or article. Some times they just highlight 3 facts.

Some notes:

  • Generally stick with left alignment.
  • If you use center, never center text any wider than 750px and never more than 3 lines at a time.
  • If a heading wraps for one item in a 3 pack, see if you can change it to something shorter or try a smaller font for all 3 items

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Button

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Heading

liquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Button

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Button

Heading

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Button

Heading

liquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Button

Heading

liquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Button

Add a Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Add a Title

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a Title

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add a Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Add a Title

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a Title

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add a descriptive title for the column.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Add a descriptive title for the column.

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a descriptive title for the column.

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi.

Heading

Nulla neque erat, aliquet nec pellentesque a, lobortis a nibh.

Heading

Suspendisse mollis nisi mi, consectetur dignissim mi tempor at. Mauris ac rhoncus elit.

Heading

Lorem ipsum dolor sit amet, consectetur
adipiscing elit.

Info banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Add a descriptive title for the column.

Aliquam lectus sapien, scelerisque dictum libero ac, viverra condimentum felis. Aenean a massa sit amet lacus volutpat gravida. Cras condimentum laoreet dapibus. Mauris et mattis purus. Duis fringilla, risus ac maximus mollis, nibh eros convallis libero, vel fermentum dui purus in diam. Suspendisse sed commodo sapien.

Add a descriptive title for the column.

Ut aliquam, tortor vel maximus sagittis, felis ante elementum velit, ac tincidunt est est a elit. Nulla purus nulla, efficitur quis consequat at, imperdiet ac ipsum. Mauris ligula felis, suscipit id efficitur vitae, convallis vel enim.

Add an overline text

Briefly and concisely explain this section.

Add a Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Add a Title

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a Title

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add a Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum. Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a.

Add a Title

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut.

Add a Title

Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section title without subtitle

Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros. Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis. Nulla facilisi. Morbi eu erat sit amet orci suscipit convallis vel vitae nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus

Aliquam lectus sapien, scelerisque dictum libero ac, viverra condimentum felis. Aenean a massa sit amet lacus volutpat gravida. Cras condimentum laoreet dapibus. Mauris et mattis purus. Duis fringilla, risus ac maximus mollis, nibh eros convallis libero, vel fermentum dui purus in diam. Suspendisse sed commodo sapien. 

Note

You should break up sections with floating blocks with sections of normal text or acordions to give the eye a break.

Add a Short Title Here

Use this space to add a medium length description. Be brief and give enough information to earn a click.

Button

Add a Short Title Here

Use this space to add a medium length description. Be brief and give enough information to earn a click.

Button

Note

Floating blocks can also be colored. It’s not recommended to use multiple colors for the floating blocks in the same section or to use color and white floating blocks on the same page.

Add a Short Title Here

Use this space to add a medium length description. Be brief and give enough information to earn a click.

Button

Add a Short Title Here

Use this space to add a medium length description. Be brief and give enough information to earn a click.

Button

50%

Stat title

10yr

Stat title

8/mo

Stat title

50%

Stat title

98%

Stat title

8/mo

Stat title

20yr

Stat title

50%

Stat Title

98%

Stat title

8/mo

Stat title

20yr

Stat title

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Heading

orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat elementum laoreet. Suspendisse gravida et dui vel bibendum.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

These full width splits are not ready yet due to tablet view issues:

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Heading

Vivamus imperdiet elit tortor, lobortis accumsan eros pretium a. Morbi odio purus, faucibus sed malesuada dictum, imperdiet non eros.

Vestibulum accumsan semper est, sed mattis velit pulvinar ut. Aliquam et arcu in dolor imperdiet bibendum eu non velit. Aliquam fringilla dui id lectus gravida, non tincidunt augue iaculis.

Meet the team

Person Name

Person title or whatever you need here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris dui odio, malesuada nec ante lobortis, placerat suscipit magna. Vivamus consectetur ipsum tortor, ut tempus ante tincidunt et.

someone@tru.ca

Person Name

Person title or whatever you need here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris dui odio, malesuada nec ante lobortis, placerat suscipit magna. Vivamus consectetur ipsum tortor, ut tempus ante tincidunt et.

someone@tru.ca

Person’s Name

Person’s title

contact info email
contact info phone

Person’s Name

Person’s title

contact info email
contact info phone

Person’s Name

Person’s title

contact info email
contact info phone

Person’s name

Person’s title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa.

  • email@email.com
  • ###-###-####

Person’s name

Person’s title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris dui odio, malesuada nec ante lobortis, placerat suscipit magna. Vivamus consectetur ipsum tortor, ut tempus ante tincidunt et.

More controlled version of the floating box style:

Add a Short Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel quam feugiat, euismod libero eget, ultrices risus. Aenean nibh est, finibus et dictum eget, malesuada ut nibh. Sed a nisl dui. Praesent fringilla pulvinar tristique. Phasellus sapien ante, congue sit amet turpis eget, facilisis malesuada massa. Nunc ornare felis semper risus porta, at aliquet risus elementum.