The ATS List is a predefined style for displaying list-type data consisting of a label and value. It should be used in place of listing data with a label and value with colon (e.g. label: value) within an app.

Additionally, the data can be presented vertically or horizontally. The horizontal version utilizes CSS Grid and is responsive - the default style has a minimum width of 200px for each grid item.

vertical

The vertical version can be used as a "data list" with class="ats-list" applied to a <dl>

first label

value

label 2

value name

third label

third value

name

firstname lastname

position

position value

code

<dl class="ats-list">
    <dt>first label</dt>
    <dd>value</dd>
    <dt>label 2</dt>
    <dd>value name</dd>
    <dt>third label</dt>
    <dd>third value</dd>
    <dt>name</dt>
    <dd>firstname lastname</dd>
    <dt>position</dt>
    <dd>position value</dd>
</dl>

horizontal

The horizontal version is best marked up using divs around the list and each list item. An additional div is placed around each label/value pair in order to act as a grid item for the declared grid. These grid items can be furthered styled for special circumstances if need be.

code

<div class="ats-list ats-list-grid">
    <div class="ats-list-grid-item">
        <dt>name</dt>
        <dd>
            data description
        </dd>
    </div>
    <div class="ats-list-grid-item">
        <dt>phone number</dt>
        <dd>
            data description
        </dd>
    </div>
    <div class="ats-list-grid-item">
        <dt>contact information</dt>
        <dd>
            data description
        </dd>
    </div>
    <div class="ats-list-grid-item">
        <dt>data title</dt>
        <dd>
            data description
        </dd>
    </div>
    <div class="ats-list-grid-item">
        <dt>data heading long title</dt>
        <dd>
            data description
        </dd>
    </div>
</div>

Tables are commonly used to present data that is returned after some sort of query or search. While useful for large data sets, try to default to using at ATS List whenever possible due to Tables' inflexibility to smaller screen sizes.

In many situations though, Tables are still the best element to present data. Due to the large size of examples and code, the Tables section is on its own page.

View Tables Section

USAGE

The Profile Component displays meta information about a given subject. Can be used for a person or a given organization/unit/group on campus. The pattern provides an area to display relevant information, such as notifications, in an organized way and set the current context of a given application.

EXAMPLE

CODE

Cards are used as a simple container for content and/or as a way to group similar content together.

There are options for headers and footers. They can support content such as images, text, list groups, or links. There are no margins by default so use spacing utilities as needed. Cards have no fixed width to start so they naturally fill the full width of its parent element unless customized.

Cards that do not utilize headers and footers and consist of card-body only can be used as generic containers to section of content on the page. There are many examples of this in use currently in this Component Library. This is based on the Gestalt principles of Grouping and Common Region.

EXAMPLE

CODE

<div class="card">
    <div class="card-header">
        <h5>Card Header</h5>
    </div>
    <div class="card-body">
        <h5 class="card-title">Internal card title</h5>
        <p class="card-text">This is where the body of the card will go. Images can be placed here as well.</p>
    </div>
    <div class="card-footer">
        <h5>Card Footer</h5>
    </div>
</div>

USAGE

Use this pattern when you want to create a page section that requires a title and an inline button element (Commonly used for a report title paired with a download/export button). With Bootstrap 4 enabled apps, this can be achieved with a flexbox pattern. It also adds a 1.2em margin to the bottom.

EXAMPLE

CODE

<div class="section-head d-flex justify-content-between">
    <h3 class="page-title">Section Title</h3>
    <button class="btn btn-default">button text</button>
</div>

USAGE

A Highlight Section can be used to call users' attention to a particular set of elements or to lead off a page. This can be especially useful for placing form elements on a page/view whose primary purpose is displaying the results of those inputs (e.g. A report page or advanced search interface).

Try to use sparingly on a given page/view. Cards should be used as the primary component to group and divide content. The Highlight Section should generally only be used to call attention to the main area of focus, when needed.

EXAMPLE

CODE

<div class="jumbotron p-3">
    <p class="lead">optional lead</p>
    <h2>heading</h2>
    <p>content is open inside the highlight section</p>
    <p>place form elements here for many apps.</p>
</div>

(use Bootstrap padding utilities to control spacing inside section)

Tabs can be used to create an interface of related data that is indexed or referenced by multiple sub-categories. Showing data about an academic year referenced by Quarter could be a common use.

ATS Lists or Tables can be placed inside a tab content pane, allowing you to combine presentation patterns if need be.

Carries a javascript dependecy.

Full Bootstrap Documentation

EXAMPLE

2018-19 DATA

• Fall 18
• Winter 19
• Spring 19

CODE

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>

USAGE

Alerts should be used to display general messaging to the user within their context of interacting with the application. The types of Alerts are listed below.

Primary - I need to provide important details or updates that should be read before interacting with the application, reading content, or taking an action. Example: an action was successful or a form submission was completed

Info - I need to provide additional information or help to the user in order to help them complete their task. Some users may not need this info to complete their task. Example: the application was updated or a system news update.

Default - Used for miscellaneous alerts that do not fit into the other categories.

Danger - Used for alerts that communicate to the user adverse changes to the application that may prevent functionality or warnings. Example: form validation warnings.

EXAMPLE

CODE

<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-default" role="alert">
A simple default alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>

USAGE

Badges are used to create a notification or count indicator that is associated with a text-based element so a user can be informed of the presence of new information or updates. This could be used for applications that involve messaging to update the user about new items in their inbox.

Badges scale to match the size of their parent element.

Full Bootstrap Documentation

EXAMPLE

Example heading New

Example text New

Badges can be used as part of links or buttons to provide a counter

CODE

<h1>Example heading <span class="badge badge-primary">New</span></h1>
<p>Example heading <span class="badge badge-primary">New</span></p>


<button type="button" class="btn btn-primary">
Inbox <span class="badge badge-default">4</span>
</button>

CONTEXTUAL EXAMPLE

CODE

<span class="badge badge-primary">Primary</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-default">Default</span>
<span class="badge badge-danger">Danger</span>

USAGE

A loading animation signals the user that an action is taking place so that they are aware there is no delay. This could be used to show that content is loading or that a request is being processed.

EXAMPLE

CODE

<div class="loading-container">
    <div class="loading">
        <div class="dot1"></div>
        <div class="dot2"></div>
        <div class="dot3"></div>
        <div class="dot4"></div>
        <div class="dot5"></div>
        <span class="sr-only">Loading...</span>
    </div>
</div>

USAGE

Takeover alerts are used for extremely important messaging that should break the users out of the context of using the application. They will appear above the main content but below the navbar (thus, not interfering with the Campus emergency messaging.

This is to be used for an important alert regarding site-wide changes, upcoming maintenance that will require down time, etc. This should only be used in rare cases. Place this between the <header> and the <main>.

EXAMPLE

See example on a blank page

CODE

<section class="takeover-alert text-center">
    <h2>THIS IS AN EXAMPLE OF A TAKEVOVER ALERT</h2>
</section>

USAGE

Buttons are the primary trigger for actions in an application. The context/result of the action should dictate which type of button is used. When used consistently across applications, this will create a homogenous experience for users and create helpful expectations of what will happen when a button is clicked.

As a guideline, the text inside of a button should always be a verb and describe the action that will take place when/if the button is clicked.

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Primary - Principaly used for positive/actionable interactions with the application. Example: Submit, Save, Edit, etc.

Info - Provides helpers or anything that will convey information to the user that does not necessarily trigger an action on the page or with the data. Example: an info button that expands on the definition of a form label.

Default - Miscellaneous/secondary action item for buttons that do not fit into the other categories

Danger - Use for for destructive actions such as Close or Delete.

Link - Used in conjuction with a primary button to de-emphasize an alternative action (See submit/cancel module). Can also be used inline with larger text areas to allow for greater touch awareness for important links on touch devices.

EXAMPLE

CODE

<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-link">link</button>
<a href="#" role="button" class="btn btn-primary">primary</a>
<a href="#" role="button" class="btn btn-info">info</a>
<a href="#" role="button" class="btn btn-default">default</a>
<a href="#" role="button" class="btn btn-danger">danger</a>
<a href="#" role="button" class="btn btn-link">link</a>

USAGE

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

EXAMPLE

CODE

<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
</button>
<div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
</div>
</div>

USAGE

Collapses allow the display of content where the visibility can be toggled by the user in order to allow for easier parsing. It can also be used in conjunction with cards to provide further grouping and division of contents.

EXAMPLE

Link with href Button with data-target

CODE

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica.
    </div>
</div>

ACCORDION EXAMPLE

Collapses can be grouped together to make an accordian pattern.

CODE

<div class="accordion" id="accordionExample">
<div class="card my-5">
    <div class="card-header" id="headingOne">
        <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
            </button>
        </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life
            accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
            laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
            bird on it squid single-origin coffee nulla assumenda shoreditch
            et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
            aesthetic synth nesciunt you probably haven't heard of them
            accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
<div class="card my-5">
    <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
            </button>
        </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life
            accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
            laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
            bird on it squid single-origin coffee nulla assumenda shoreditch
            et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
            aesthetic synth nesciunt you probably haven't heard of them
            accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
<div class="card my-5">
    <div class="card-header" id="headingThree">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
            </button>
        </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life
            accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
            laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
            bird on it squid single-origin coffee nulla assumenda shoreditch
            et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
            aesthetic synth nesciunt you probably haven't heard of them
            accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
</div>

USAGE

In situations when a user is given the choice to confirm/submit or cancel and operation, the following pattern should be followed for the buttons.

The Confirm/Submit will be a primary button and the Cancel button will always be to the immediate right as a button-link. The buttons should be located at the bottom of the form and left-aligned. Placing the Confirm/Cancel buttons in a card footer should be considered if it makes contextual sense/follows aesthetic of the page.

For a page/view that only contains a form (or where the primary purpose of the page/view is the house the form), consider using class btn-lg on the primary button to add weight to the button's action, as the user is submitting a large(er) amount of data.

EXAMPLE

CODE

<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-link">cancel</button>

USAGE

The datepicker is javascript plugin to allow for a visual datepicker on date inputs on forms. The calendar is triggered by a click/touch inside the text input or the calendar button.

full documentation

EXAMPLE

CODE

<div class="input-group date" id="elementID" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-append input-group-addon">
        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
    </div>
</div>

USAGE

Primarily, contains navigation links and the application title. Also present is the launching point of the user menu - always pulled to the right.

EXAMPLE

CODE

<nav class="navbar navbar-expand-md navbar-dark bg-primary d-flex">
    <button aria-label="Toggle navigation" class="navbar-toggler order-1" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-title navbar-brand order-2 ml-2 ml-md-0 mr-auto" href="#">Application Title</a>
    <div class="collapse navbar-collapse order-4">
        <ul class="navbar-nav ml-auto mt-2 mt-md-0">
            <li class="nav-item">
                <a class="nav-link" href="#">Link-A</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link-B</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
    <button id="menuBtn" href="#drawerMenu" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerMenu" class="btn btn-outline-info ml-md-3 order-3 order-md-4" type="button"><i aria-hidden="true" class="fa fa-ellipsis-v fa-lg"></i> username</button>
</nav>

USAGE

Include the sidebar.css file as included on this page

The layout is a CSS Grid implementation. Feel free to adjust left side width via new helper classes as needed.

EXAMPLE

This page implements Sidebar layout

CODE

<main class="layout-main grid-sidebar-content" role="main">
    <section class="sidebar">
    ...
    </section
    <section class="main-content">
    ...
    </section>
</main

The home page should feature a hero section. The image used for the hero section should related to the site it appears on. If there is no image, use the solid Geisel library found on UCPA. The hero section should also contain a welcome message placed inside a left-aligned textbox near the bottom. The text should be right-centered

The header of the homepage should be strong text and the subhead should be italicized. The background of the header section should use #E9ECEF. The backgroudn of the page content should be white.

The home page should feature a hero section. The image used for the hero section should related to the site it appears on. If there is no image, use the solid Geisel library found on UCPA. The hero section should also contain a welcome message placed inside a left-aligned textbox near the bottom. The text should be right-centered

The header of the homepage should be strong text and the subhead should be italicized. The background of the header section should use #E9ECEF. The backgroudn of the page content should be white.

The home page should feature a hero section. The image used for the hero section should related to the site it appears on. If there is no image, use the solid Geisel library found on UCPA. The hero section should also contain a welcome message placed inside a left-aligned textbox near the bottom. The text should be right-centered

The header of the homepage should be strong text and the subhead should be italicized. The background of the header section should use #E9ECEF. The backgroudn of the page content should be white.