Skip to main content

All Components

This is the "Kitchen Sink" of the CBP Theme . It is provided to demonstrate various components in action. For guidance on how best to use the theme's components take a look at the CBP Style Guide .

Table of Content

Accordion Alerts Bread Crumbs Buttons Cards Carousel Dialogs Form Controls Forms Icons Labels and Badges List Group Menus Meta Data Pagination Popovers Progress and Loading Security Classification Banners Step Indicators Tables Tabs Tags Timelines Tooltips Typography

Accordion

Accordion Standard

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.
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.
Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000

Accordion Light

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.
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.
Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000

Alerts

Notifications

Success notification
Message sent to Jerry.
Info notification
Jerry added a comment to one of your cases (90/098,881).
Warning notification
Case 90/842,381 is due tomorrow.
Danger notification
Connection has been lost. Retrying in 30 seconds.

Bread Crumbs

  1. Home
  2. Library
  3. Data

Buttons

Types

Disabled State

Sizes

Block level buttons

Button Groups

Toggle Buttons

Dropdown Button

Split Buttons

Icon Buttons

Cards

Cards with different content

CBP Super Bowl 50 Air and Marine Operations Security

CBP Super Bowl 50 Air and Marine Operations Security

Personnel with U.S. Customs and Border Protection conduct operations in advance of Super Bowl 50 in Santa Clara, Calif., 2016. (U.S. Customs and Border Protection Photo by Glenn Fawcett)

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.

Featured event:
May 24, 2016
7-11pm

  Latest News

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
Link opens in new windowSee CBP style guide for more cards examples

Carousel

Dialogs

Standard Dialog (File Upload)

Rename file

Standard Dialog (Search and Replace)

Find and replace

Thank you!

Your request has been submitted.

Confirmation

Delete this user?

All user information will be deleted.

Abandon changes?

You have unsaved changes. Your changes will be lost.

Actionless

Uploading document...
60%

Live

Form Controls

Field States

Input Masks

With Floating Label

With Placeholder Label

Text Area

Select

Plain Ol' Select Without third party select JS libraries

Plain Ol' Multiple Select

Selectize

Selectize Standard Select
Selectize Multiple Select

Select2

Select2 Standard Select
Select2 Multiple Select

Radio Buttons

Inline Radio Buttons

Checkboxes

Inline Checkboxes

Toggle Switches

Use the toggle switches, instead of radio buttons, for two or more specific options.

Select options

Date Picker

With Floating Label

With Placeholder Label

Forms

Field Label Combinations

Only alphabet and no spaces
Only alphabet and no spaces
Only alphabet and no spaces

Required Fields

 Only alphabet and no spaces
 Only alphabet and no spaces
 Only alphabet and no spaces
 Only alphabet and no spaces
 Only alphabet and no spaces

Form Input File Type #1

( Mobile-First Approach )

Form Input File Type #2

( Matches current Style Guide )

Form Validation

Alphabet Validation (no space)

 Only alphabet and no spaces

Numeric Validation

 Only numbers

Help Text

Public profile

This information will appear on your public profile.

 Not a valid full name

This is how people will contact you.

 Not a valid email address

Input Character Limits

Textfield

 Not a valid email address

This is how people will contact you.

Textarea

Examples

Icons

Link opens in new windowSee CBP style guide for more icons examples

Labels and Badges

DEFAULT PRIMARY SUCCESS INFO WARNING DANGER

Subtle

DEFAULT PRIMARY SUCCESS INFO WARNING DANGER

Badges

5 200 0

List Group

  • Inbox 1,932
  • Outbox 2
  • Spam

Menus

Submenu

With Icons

Form Controls

Meta Data

Stacked

BOL Type
B - Booking
MOT
11 - Vessel(Containerized)
Carrier
JONN
Conveyance
REG O BOL B2
Voyage/Trip/Flight
0512A000001
Entry Number (Type)
BVA-01070040 (01)
Bill Number (Type)
JONN-150512MC0202 (B)
Entry Type
01 - Consumption: Free and Dutiable
Port of Entry
5206
Importer
--
Bond Type
9 - Single Transaction
Entry Filing Date
07/17/2015 13:40:22
Status
1
Shipment
5004672569

Side-by-side

BOL Type
B - Booking
MOT
11 - Vessel(Containerized)
Carrier
JONN
Entry Type (Type)
01 - Consumption: Free and Dutiable
Port of Entry
5206
Importer
--
Bond Type
9 - Single Transaction
Entry Filing Date
07/17/2015 13:40:22
Conveyance
REG O BOL B2
Voyage/Trip/Flight
0512A000001

Pagination

1 ... 13 14 15 16 17 ... 25

Small

15/25

Popovers

Static Popover

Add note

Simple search: Type a term in the search field and select the search button.

Advanced search: Advanced boolean operators may be used. The default operator when searching multiple terms is “AND”.

Learn more

Live Demo

Progress and Loading

Progress

Importing... 60%

Load Spinners

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
 Loading...

Security Classification Banners

Look below at the footer level to see the banners after activing them.

Step Indicators

Horizontal

Vertical

Dots

Tables

CBP Default Table

Includes Borderless and Hover stylings with MDL additions Just by using the classnames: "table mdl-js-data-table"

Standard Table
Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000

Link opens in new windowSee CBP style guide for more table examples

Tabs

Standard

Did you know that

Banging your head against a wall burns 150 calories an hour.

Did you know that

Cherophobia is the fear of fun.

Light

Nested Tabs (Standard > Light)

Tags

Standard

  • Default
  • Inverse
  • Primary
  • Info
  • Warning
  • Danger
  • Success

Subtle

  • Default
  • Primary
  • Info
  • Warning
  • Danger
  • Success

Timelines

Basic Timeline Example

  • 2016 July 10
  • 12:05

    Event #1 ...

    ... Content goes here
    Timeline footer ...button...
  • Text and more
    Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
    No border, no heading, just text
  • Event 1
    12:15

    Event with no icon ...

    ... Content goes here
    Timeline footer ...button...

Another Shipment Timeline Example

Shipment 1234567890

  • Yesterday
  • 2 filings

    Trade Filings

    Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
  • Port 1234 to Port 4321

    Cargo Movement

  • * 53 system events

    Internal Events

  • 7 related notes

    Notes

  • 3 actions

    CBP Officer Action

  • Today
  • 1 event

    Post Release

Another Random Timeline Example

  • 2016 July 10
  • 12:05

    Event #1 sent you an email

    Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
    Read more Delete
  • 5 mins ago

    Sarah Young accepted your friend request

  • 27 mins ago

    Jay White commented on your post

    Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables
    View more button
  • 2016 June 22
  • 2 days ago

    Mina Lee uploaded new photos

    Image 150x100 Image 150x100 Image 150x100 Image 150x100

Tooltips

Variable Positioning

Additional Styling Options

Typography

h1. Main Heading Regular 30px Secondary text

h2. Sub Heading Semibold 24px Secondary text

h3. Sub Sub Heading Semibold 22px Secondary text

h4. Sub Sub Sub Heading Semibold 20px Secondary text

h5. Sub Sub Sub Sub Heading Semibold 18px Secondary text
h6. Sub Sub Sub Sub Sub Heading Semibold 16px Secondary text

Link opens in new windowSee CBP style guide for more typography examples