House Style Library


This page includes all your typographic, navigational and interactive elements so that we can make sure things work together smoothly. These are great blocks for modular combinations that will suit all your needs.


Accordion



Headlines

Primary Headline

Secondary Headline

Tertiary Headline

Low level Headline

I Doubt You'll Need This Level Headline

Lists

Unordered Lists

Ordered Lists

  1. Eating oysters on the beach
  2. Hiking through the rainforest
  3. Sailing in Howe Sound
  4. Touring Okanagan wine country

Button

Primary Secondary Success Alert Warning

Outline

So Tiny So Basic So Large Expand to space

Callout

This is a default callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Cards

Featured

Your Title Here

An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Buttons!

Who doesn't love a good button? Buttons work in all of their forms too.

I'm a button
Some Details

Centered Layout

There's an option to center all the content too.

Click me

Flex Video

This video can shrink expand to any size

Forms

Here's how you use this input field!

Choose Your Favorite
Check these out
Label

Slides



  • You can throw an image and/or some text in here!

    But often they are used for images. Adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This slide has further desription




  • You can throw an image and/or some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This slide has further desription




  • You can throw an image and/or some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This slide has further desription




  • You can throw an image and/or some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This slide has further desription



Reveal

Click me for a basic modal | Click me for a full-screen modal

This is a basic modal

Using hipster ipsum for dummy text

Stumptown direct trade swag hella iPhone post-ironic. Before they sold out blog twee, quinoa forage pour-over microdosing deep v keffiyeh fanny pack. Occupy polaroid tilde, bitters vegan man bun gentrify meggings.

Full screen modal

Intropsective Cage

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Tabs

One

I'm a tab panel with text content – anything can go in here though. On medium-down screen sizes, this component will transforms into an accordion to best suit its device environment and screen size.

Two

Three

Check me out I'm a tab panel with text content!

Four

Five

The more the merrier, tabs are best in pretty specific use cases though.

Six


Random image generation.

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.