You are here: American University Content Publisher Tools Examples User Interface Kit

Basic Text

Principal rules: Main text should be easily legible and readable meaning a minimum 16px in size and text blocks should not exceeed 700-800px in width to avoid eye strain while reading.

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

Principal rules: Headings are intended for document structure not font-size or appearance selection.

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

Pull Quotes

Spotlight Quotes

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

Tier 2/3 Pull Quotes

Basic Lists

Compact (Default)

  • 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

Spacious For use with lists with large amounts of text in the bullets

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

Sections For use with structured documents like bylaws

  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

Numbers in the class name denote how many columns on Desktop, Tablet, and Mobile. For classes with two numbers, those represent Desktop and Tablet & Mobile.

.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

Tabular with Narrow-Term

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 Extra Narrow-Term

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 No Bolding

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

Buttons

Default Link Button

Ìý

Primary Link Button

Ìý

News Link Button

Ìý

CTA Link Button **

Ìý

CAS Link Button

Ìý

Kogod Link Button

Ìý

SIS Link Button

Ìý

SOC Link Button

Ìý

SOE Link Button

Ìý

SPA Link Button

Ìý

SPEXS Link Button

Ìý

Library Link Button

Ìý

Magazine Link Button

Ìý

Outline Link Button

Ìý

White 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

Principal rules: Utilize the HTML5 attributes to their best ability including input type, required, placeholder, pattern, autocomplete, etc. Do not rely solely on front-end validation. All form inputs must have labels associatied with them aria-labels, titles, etc. do not count.

Account Credentials
Biographical Info

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)

Tables

Principal rules: Tables are for data display not for layout. If you are using them to achieve a side-by-side this-equals-that look use a Tabular List.

Default (still requires that class="table" be added)

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-hover

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

Responsive Allows for sideways scrolling on a mobile device. Requires extra div.

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

Tabbed Content

Principal rules: Content on each tab should be worth the click. Should be used to support the principle of progressive disclosure not just to shorten a page. Scrolling is not to feared.

Default content displayed at load. Should be the most relevant content for the user.

Content hidden at load. Should be content that maybe the user wants maybe they don't. Should not be required reading for the user.

Content hidden at load. Should be content that maybe the user wants maybe they don't. Should not be required reading for the user.

Content hidden at load. Should be content that maybe the user wants maybe they don't. Should not be required reading for the user.

Collapsibles

Plain

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

Bold Colors

Available in multiple colors, however, do not use every color on one page. If you need to toggle between colors, you may do so with Slate and Warm Blue.

Information that makes the click worth it.

Information that makes the click worth it.

Information that makes the click worth it.

Information that makes the click worth it.

Pale Colored Backgrounds

Heading Text That Wraps

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.

Header Text That Spans

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.

Social Media Links

Default

CAS

KOGOD

SOC

SIS

SPA

SPEXS

LIBRARY