Style Guide

Typography

Display Hero

Display Hero Sub

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

P Heading 1

P Heading 2

P Heading 3

P Heading 4

P Heading 5

P Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

No! The cat shelter's on to me. Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you. Hello, little man. I will destroy you! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?

This line of text is meant to be treated as fine print.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Buttons

Button group

Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Forms

Form Reverse

We'll never share your email with anyone else.
Radios buttons

Default Form

We'll never share your email with anyone else.
Radios buttons

Input group

@
@example.com
https://example.com/users/
$ .00
With textarea

Floating labels

Validation

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Tabs

  • Repurposed
  • Recycled
  • Responsible
Repurposed

Repurposed

Everything in our (Re)Purpose® Collection uses fabric left over from other companies' production runs. This reduces the environmental impact of sourcing new fabric. Repurposed materials are what make our Del Día bags one-of-a-kind and our Teca layers limited-edition.

Shop Repurposed
Recycled

Recycled

When we prioritize recycled materials rather than raw materials in our designs, we limit our dependence on fossil fuels and reduce landfill usage. Our Teca Cálido Jackets, several of our fleece, our Cada Día bags, our Capa jackets, and our activewear all contain recycled materials.

Shop Recycled
Responsible

Responsible

We define "responsible" as a material with a third-party sustainability designation, like Fair Trade Certified™ or Global Organic Textile Standard. We use cruelty-free Responsible Down Standard-certified insulation in all our down jackets, and most of our logowear and hats are made in a Fair Trade Certified™ facility.

Shop Responsible

Accordions

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Breadcrumbs

Card

PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Bataan, Philippines

Bataan, Philippines

Backpacks and Bags

Known for producing best-in-class technical items, this factory partners with us in reducing fabric waste through our Del Día products. Here’s how Del Día works: the factory collects unused materials produced by other brands in its facilities, and we turn those scraps into backpacks.

Read More
Tianjin, China

Tianjin, China

Insulation & Outerwear

An independently owned factory with progressive and thoughtful leadership, this facility produces our jackets and insulation pieces. Beyond developing excellent products with responsibly sourced (RDS certified) down, the factory’s owner, George Huan, prioritizes the well-being of his workers through a variety of programs that are not found among most competitors.

Read More

Full Width Panel

Want More?

Want to know more about our grand opening celebration? Head over to our event page with details.

Learn More

Dropdowns

List Groups

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

Modal

Pagination

Popovers

Progress

0%
25%
50%
75%
100%

Toasts

Tooltips