Modal Triggers

Purpose

This kit documents the user-interface styles, components, and modules for this project.

Notes

  • Powered by Bootstrap 3.x

  • The default state of this page is meant as a starting point; modify as necessary!

Style

Color

Basic

Grayscale

Brand

Logos

Icons

Brand

Font Sets

Apercu Pro Regular

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

Apercu Pro Medium

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

Apercu Pro Bold

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

Typography

.gallery__title

Heading

.gallery__subtitle

Heading

.section__title

Heading

.account-notification__title

.text-container__title

Heading

.card__title

Heading

.text-container__subtitle

Heading

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.

.gallery__text

Lorem ipsum dolor sit amet.

.text-container__text / .blockquote__text

Lorem ipsum dolor sit amet.

.blockquote__cite-text

Lorem ipsum dolor sit amet.

.copyright__text

Lorem ipsum dolor sit amet.

.hr, <hr>

.hr.hr-full

Typography (Reversed)

If an element needs to appear on both light & dark backgrounds; create a reverse version. A common convention is to add a secondary class of [original-class-attr]-reverse.

Note: This section uses .ui-block-reverse to set the background and text color. Keep this in mind when adding specific examples.

Heading tags define the document outline and should not be selected based on how they appear visually. Default styles are useful during live-wireframing but beyond that they become cumbersome to override and their visual appearence should be reset.

TIP: Reset headings automatically, see @css/common/variables.scss and set -heading-styles to true.

.gallery__title

Heading

.gallery__subtitle

Heading

.section__title

Heading

.account-notification__title

.text-container__title

Heading

.card__title

Heading

.text-container__subtitle

Heading

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.

.gallery__text

Lorem ipsum dolor sit amet.

.text-container__text / .blockquote__text

Lorem ipsum dolor sit amet.

.blockquote__cite-text

Lorem ipsum dolor sit amet.

.copyright__text

Lorem ipsum dolor sit amet.

.hr, <hr>

.hr.hr-full

Rich Text

Attendance Policy

As an internationally renowned symphonic and operatic conductor, GUSTAVO DUDAMEL is motivated by a profound belief in music's power to unite and inspire. He currently serves as Music Director of the Simón Bolívar Symphony Orchestra of Venezuela and Music & Artistic Director of the Los Angeles Philharmonic, and the impact of his leadership extends from the greatest concert stages to classrooms, cinemas and innovative digital platforms around the world.

  • Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ea rem at accusamus asperiores amet aspernatur explicabo quisquam odio quas dicta sapiente non neque libero, fuga qui, sequi, atque optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, earum omnis, impedit dicta veniam enim! Error voluptas iusto voluptatum, quo sunt eum accusamus commodi doloribus vel, ratione, minima explicabo doloremque.
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum
  5. Lorem Ipsum

Rich Text Reversed

Attendance Policy

As an internationally renowned symphonic and operatic conductor, GUSTAVO DUDAMEL is motivated by a profound belief in music's power to unite and inspire. He currently serves as Music Director of the Simón Bolívar Symphony Orchestra of Venezuela and Music & Artistic Director of the Los Angeles Philharmonic, and the impact of his leadership extends from the greatest concert stages to classrooms, cinemas and innovative digital platforms around the world.

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum
  5. Lorem Ipsum

Components

Buttons

Bootstrap Buttons are great for live wires but are cumbersome to override in practice. Once the design is underway it's best to reset the .btn base class with a simpler default and / or create custom button classes that do not conflict with existing bootstrap .btn-* option classes.

TIP: Reset button styles automatically, see: @css/common/variables.scss and set -btn-base-styles to true (be sure to also follow the instructions located in the comments).

Primary Buttons (Small)

.btn.btn-small.btn-solid

Solid Button

.btn.btn-small.btn-solid-inverse

.btn.btn-small.btn-solid-neutral

.btn.btn-small.btn-solid-neutral-inverse

.btn.btn-small.btn-solid-grouped

.btn.btn-small.btn-hollow

.btn.btn-small.btn-hollow-inverse

.btn.btn-small.btn-hollow-neutral

.btn.btn-small.btn-hollow-neutral-inverse

Primary Buttons (Medium)

.btn.btn-medium.btn-solid

Solid Button

.btn.btn-medium.btn-solid-inverse

.btn.btn-medium.btn-solid-neutral

.btn.btn-medium.btn-solid-neutral-inverse

.btn.btn-medium.btn-solid-grouped

.btn.btn-medium.btn-hollow

.btn.btn-medium.btn-hollow-inverse

.btn.btn-medium.btn-hollow-neutral

.btn.btn-medium.btn-hollow-neutral-inverse

Primary Buttons (Large)

.btn.btn-large.btn-solid

Solid Button

.btn.btn-large.btn-solid-inverse

.btn.btn-large.btn-solid-neutral

.btn.btn-large.btn-solid-neutral-inverse

.btn.btn-large.btn-solid-grouped

.btn.btn-large.btn-hollow

.btn.btn-large.btn-hollow-inverse

.btn.btn-large.btn-hollow-neutral

.btn.btn-large.btn-hollow-neutral-inverse

Secondary Buttons

.btn.btn-scroll-alt

.btn.btn-disabled

  • Let us take you on an adventure, buy a curated concert series:

    See Series
  • OR

  • Let us take you on an adventure, buy a curated concert series:

    See Series
  • OR

  • Let us take you on an adventure, buy a curated concert series:

    See Series

Primary Buttons (On Dark Background)

.btn.btn-small.btn-solid

Solid Button

.btn.btn-small.btn-solid-inverse

.btn.btn-small.btn-solid-neutral

.btn.btn-small.btn-solid-neutral-inverse

.btn.btn-small.btn-solid-grouped

.btn.btn-small.btn-hollow

.btn.btn-small.btn-hollow-inverse

.btn.btn-small.btn-hollow-neutral

.btn.btn-small.btn-hollow-neutral-inverse

Primary Buttons (Medium)

.btn.btn-medium.btn-solid

Solid Button

.btn.btn-medium.btn-solid-inverse

.btn.btn-medium.btn-solid-neutral

.btn.btn-medium.btn-solid-neutral-inverse

.btn.btn-medium.btn-solid-grouped

.btn.btn-medium.btn-hollow

.btn.btn-medium.btn-hollow-inverse

.btn.btn-medium.btn-hollow-neutral

.btn.btn-medium.btn-hollow-neutral-inverse

.btn.btn-medium.btn-text

.btn.btn-medium.btn-scroll

.btn.btn-medium.btn-scroll-alt

.btn.btn-medium.btn-menu

.btn.btn-large.btn-disabled

.btn.btn-large.btn-sold-out

Primary Buttons (Large)

.btn.btn-large.btn-solid

Solid Button

.btn.btn-large.btn-solid-inverse

.btn.btn-large.btn-solid-neutral

.btn.btn-large.btn-solid-neutral-inverse

.btn.btn-large.btn-solid-grouped

.btn.btn-large.btn-hollow

.btn.btn-large.btn-hollow-inverse

.btn.btn-large.btn-hollow-neutral

.btn.btn-large.btn-hollow-neutral-inverse

Secondary Buttons

.btn.btn-text

.btn.btn-scroll

.btn.btn-scroll-alt

.btn.btn-menu

.btn.btn-sold-out

Forms

Notifications

The email and/or password you entered is incorrect. Try again, or choose another log in option.
The email and/or password you entered is incorrect. Try again, or choose another log in option.

Fieldset / Legend

Payment Information

Inputs

Input States

Required

Checkboxes

Radios

Tables