You are here: User Interface Kit

Text

Lede Text

Lorem ipsum dolor sit amet, Bold: consectetur adipiscing elit. Etiam et eleifend nulla, at molestie orci. Vestibulum viverra nibh a vestibulum imperdiet. Nunc ultricies efficitur massa nec commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Emphasis: Morbi pulvinar mollis cursus. Morbi nec augue id justo placerat semper ut a elit. Nulla eleifend pulvinar nisl, ac sodales lorem mollis sit amet. Suspendisse quis turpis in urna aliquet maximus. Maecenas ultrices ut tortor sit amet porttitor.

Suspendisse sodales posuere ante. Bold: Donec dictum id quam sed pulvinar. Nunc nisl augue, Cite: porta eget tincidunt eu, rhoncus sed mauris. In dignissim eu arcu a euismod. Praesent tellus purus, molestie id felis eu, bibendum feugiat turpis. Morbi luctus dui in ipsum ornare, a vestibulum sapien placerat. Quisque ut sapien ipsum. Code: Etiam pharetra massa in mi vulputate, eu pharetra ligula sagittis.

Body Text

LIDSA, etiam et eleifend nulla, at molestie orci. Vestibulum viverra nibh a vestibulum imperdiet. Nunc ultricies efficitur massa nec commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Small: consectetur adipiscing elit. Morbi pulvinar mollis cursus. Morbi nec augue id justo placerat semper ut a elit. Nulla eleifend pulvinar nisl, ac sodales lorem mollis sit amet. Suspendisse quis turpis in urna aliquet maximus. Maecenas ultrices ut tortor sit amet porttitor.

Suspendisse sodales posuere ante. Donec dictum id quam sed pulvinar. Mark: Nunc nisl augue, porta eget tincidunt eu , rhoncus sed mauris. In dignissim eu arcu a euismod. Praesent tellus purus, molestie id felis eu, bibendum feugiat turpis. Del: Morbi luctus dui in ipsum ornare,Insert: a vestibulum sapien placerat. Quisque ut sapien ipsum. Etiam pharetra massa in mi vulputate, eu pharetra ligula sagittis.

4400 Massachusetts Avenue NW
Washington, DC 20016

Quote: Suspendisse sodales posuere ante. Donec dictum id quam sed pulvinar. Nunc nisl augue, porta eget tincidunt eu, rhoncus sed mauris. In dignissim eu arcu a euismod. Praesent tellus purus, molestie id felis eu, bibendum feugiat turpis. Morbi luctus dui in ipsum ornare, a vestibulum sapien placerat. Quisque ut sapien ipsum. Etiam pharetra massa in mi vulputate, eu pharetra ligula sagittis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Sed lobortis nisl sed iaculis venenatis.
  • Praesent hendrerit libero sed metus fringilla, nec porta lacus ornare.
  1. Etiam vitae turpis rhoncus, tincidunt nulla vel, fermentum nunc.
  2. Phasellus sit amet mi consectetur, euismod urna eu, pharetra nisl.
  3. Maecenas egestas nisl ut risus luctus tincidunt.
Blockquote: Suspendisse sodales posuere ante. Donec dictum id quam sed pulvinar. Nunc nisl augue, porta eget tincidunt eu, rhoncus sed mauris. In dignissim eu arcu a euismod. Praesent tellus purus, molestie id felis eu, bibendum feugiat turpis. Morbi luctus dui in ipsum ornare, a vestibulum sapien placerat. Quisque ut sapien ipsum. Etiam pharetra massa in mi vulputate, eu pharetra ligula sagittis.
Pre: Suspendisse sodales posuere ante. Donec dictum id
quam sed pulvinar.
Nunc nisl augue, porta eget tincidunt eu, rhoncus sed mauris.
In dignissim eu arcu a euismod. Praesent tellus purus,
molestie id felis eu, bibendum feugiat turpis.

Heading Types

Default Headings

This is H1 Text Heading Subheading Text

This is H2 Text Heading Subheading Text

This is H3 Text Heading Subheading Text

This is H4 Text Heading Subheading Text

This is H5 Text Heading Subheading Text
This is H6 Text Heading Subheading Text

Special Headings

WKS Style Heading Text

Links

Within Text

Lorem ipsum dolor sit amet, consectetur adipiscing (visited) elit. Etiam et eleifend nulla, at molestie orci. Vestibulum viverra nibh a vestibulum imperdiet. Nunc ultricies efficitur massa nec commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar mollis cursus. Morbi nec augue id justo placerat semper ut a elit. Nulla eleifend pulvinar nisl, ac sodales lorem mollis sit amet. Suspendisse quis turpis in urna aliquet maximus. Maecenas ultrices ut tortor sit amet porttitor.

Stand Alone Link

Pull Quotes

Spotlight Quotes

Engaging in service opportunities makes me more aware of others' needs.

Tier 2/3 Pull Quotes

Basic Lists

Default

  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Compact

  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Extra Compact

  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Step-by-step Lists

Bold Decimal

  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Bold Roman

  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Bold Alpha

  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Columnar Lists

.cols-4-3-2

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

.cols-4-2

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

.cols-3-2-1

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

.cols-3-2

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

.cols-3

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

.cols-2

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Tabular Lists

Tabular Default

Item 1
Item 1's descriptiive text that can be longer than you like.
Item 2
Item 2's first descriptive text.
Item 2's second descriptive text item
Item 3
Item 3's only link child

Tabular with Wide-Term

Item 1 which has a need to be wider
Item 1's descriptiive text that can be longer than you like.
Item 2 which has a need to be wider
Item 2's first descriptive text.
Item 2's second descriptive text item
Item 3 which has a need to be wider
Item 3's only link child

Buttons

Default Link Button

 

Primary Link Button

 

News Link Button

 

CTA Link Button **

 

Outline Link Button

 

Items marked * should never happen in reality as these styles were meant for use with persistent links not in forms where it might get disabled.

Items marked ** may change color based on school color by adding the "btn-school" class.

Forms

Read-only fields should only be used for fields that a user can never edit on that screen. Use disabled to temporarily disable a field.

Example block-level help text here.

Dynamic Label

Example block-level help text here.

Styled Selects

Radios and Checkboxes

Badges

Inbox 42

Alerts (Single)

Alerts (Multiple)

Table: Default

The Caption is the Table Heading. To hide for sighted users use class="sr-only" on it.
Undergraduate Students Full-Time (12-17 credit hours) Part-Time Summer Session 2016

This is the table footer

Sports Center Fee

$65.00

$30.00

$0.00

Undergraduate Activity Fee

$88.50

$15.00

$0.00

Student Technology Fee

$120.00

$40.00

$0.00

Table: Bold

The Caption is the Table Heading. To hide for sighted users use class="sr-only" on it.
Undergraduate Students Full-Time (12-17 credit hours) Part-Time Summer Session 2016

This is the table footer

Sports Center Fee

$65.00

$30.00

$0.00

Undergraduate Activity Fee

$88.50

$15.00

$0.00

Student Technology Fee

$120.00

$40.00

$0.00

Table: Striped

The Caption is the Table Heading. To hide for sighted users use class="sr-only" on it.
Undergraduate Students Full-Time (12-17 credit hours) Part-Time Summer Session 2016

This is the table footer

Sports Center Fee

$65.00

$30.00

$0.00

Undergraduate Activity Fee

$88.50

$15.00

$0.00

Student Technology Fee

$120.00

$40.00

$0.00

Table: Responsive

The Caption is the Table Heading. To hide for sighted users use class="sr-only" on it.
Undergraduate Students Full-Time (12-17 credit hours) Part-Time Summer Session 2016

This is the table footer

Sports Center Fee

$65.00

$30.00

$0.00

Undergraduate Activity Fee

$88.50

$15.00

$0.00

Student Technology Fee

$120.00

$40.00

$0.00

Figures

Caption Above

Optional Large Heading Same as all other H1s

Caption as Header (only one figcaption per figure)
Placeholder figure

Source: Content

Caption Below

Optional Large Heading Same as all other H1s

Placeholder figure
Caption as Footer (only one figcaption per figure)

Source: Content

Caption Below

Optional Large Heading Same as all other H1s

Placeholder figure
Caption as Footer (only one figcaption per figure)

Source: Content

Tabs

Collapsibles

Plain

Flat fee covering costs for full-time enrollment (12-17 credits per semester) for both the fall 2016 and spring 2017 semesters.

Social Media Links

Default