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
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
Heading
.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
Heading
.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
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- 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
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum