Skip to main content

TimelineExamples

/timeline-elements

Lists: Regular and USWDS

Timeline name
TimelineExamples
Event date
Display Date
Apr. 23, 2022
Body

Standard UL and OL

These is a standard multi-level ul list:

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

These is a standard multi-level ol list:

  1. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    1. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
  2. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    1. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
    2. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
  3. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

USWDS Process Lists

  1. Start a process

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
    • Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
    • Aliquam erat volutpat. Sed quis velit.

  2. Proceed to the second step

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  3. Complete the step-by-step process

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  1. Start a process.

  2. Proceed to the second step.

  3. Complete the step-by-step process.

  1. Start a process.

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

  2. Proceed to the second step.

    Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

  3. Complete the step-by-step process.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

USWDS Stylized Lists

Default

  • Wash your hands for 20 seconds with soap
  • Stay six feet away from others
  • Avoid large gatherings

Simple content

Benefits of joining Global Entry program:

  • No processing lines
  • Access to expedited entry benefits in other countries
  • Available at major U.S. airports
  • Reduced wait times

Rich content

  • Donate cash when possible.

    Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.

  • Confirm what donations are needed.

    Unneeded and unsolicited goods burden local organizations’ ability to meet survivors’ confirmed needs, drawing away valuable volunteer labor, transportation and warehouse space.

  • Talk to trusted organizations about volunteering.

    Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.

Custom size with rich content

Here are a few easy ways you can help reduce energy use and costs while spending more time at home.

  • Let the sun shine.

    On sunny days, open your curtains to allow the sun to naturally warm the rooms of your home without using electricity. Natural sunlight can also lift your mood to help brighten your day. On warm days, close your curtains to help keep your house cool.

  • Adjust your schedule.

    Instead of running high-energy-use appliances such as dishwashers and clothes dryers during mid-afternoon or early evening hours, operate them early in the morning or late at night. Some utilities charge less at off-peak times, which will help reduce your costs.

  • Fill it up.

    Wash full loads, whether it’s clothes or dishes. Washing multiple small loads means you’re using and heating more water, which can increase your expenses. Using cold water for clothes washing can also help lower your costs.

Custom size

  • Timing. Is now the right time to start a business?
  • Funding. Do I have enough money to launch a business?
  • Need. Will this business fill a real need for my customers?

Cards: USWDS

Timeline name
TimelineExamples
Event date
Display Date
Mar. 25, 2022
Body

Standard Layout

  • Card

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

    Visit Florida Keys

  • Card with media

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

    Visit Florida Keys

  • Media and header first

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

    Visit Florida Keys

  • Inset media

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

    Visit Florida Keys

  • Exdent media

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

    Visit Florida Keys

Flag Layout

  • Flag default

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Visit Florida Keys

  • Flag media on right

    A placeholder image

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Visit Florida Keys

Inline Stylized Callouts

Timeline name
TimelineExamples
Event date
Display Date
Mar. 9, 2022
Body

This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout. This is a blue callout.

This is a blue callout with a link. This is a blue callout with a link. This is a blue callout with a link. This is a blue callout with a link. This is a blue callout with a link. This is a blue callout with a link. This is a blue callout with a link.

ALL PAGES: Within the Timeline, only callout-med can be used, not callout. This is a callout-med. This is a callout-med. This is a callout-med. This is a callout-med. This is a callout-med. This is a callout-med. This is a callout-med. This is a callout-med.

ALL PAGES: Within the Timeline, only callout-med can be used, not callout. This is a callout-med with a link. This is a callout-med with a link. This is a callout-med with a link. This is a callout-med with a link. This is a callout-med with a link. This is a callout-med with a link.

This is a document callout. This is a document callout. This is a document callout. This is a document callout. This is a document callout. This is a document callout. This is a document callout.

This is a document callout with a link. This is a document callout with a link. This is a document callout with a link. This is a document callout with a link. This is a document callout with a link.

This is a NR callout. This is a NR callout. This is a NR callout. This is a NR callout. This is a NR callout. This is a NR callout. This is a NR callout. This is a NR callout.

This is a NR callout with a link. This is a NR callout with a link. This is a NR callout with a link. This is a NR callout with a link. This is a NR callout with a link.

This is a link callout. This is a link callout. This is a link callout. This is a link callout. This is a link callout. This is a link callout. This is a link callout. This is a link callout.

This is a link callout with a link. This is a link callout with a link. This is a link callout with a link. This is a link callout with a link. This is a link callout with a link.

This is an image caption callout. This is an image caption callout. This is an image caption callout. This is an image caption callout. This is an image caption callout.

This is an image caption callout with a link. This is an image caption callout with a link. This is an image caption callout with a link. This is an image caption callout with a link.

Buttons

Timeline name
TimelineExamples
Event date
Display Date
Feb. 18, 2022
Body

Drupal

Drupal Button

USWDS Default

DefaultHoverActiveFocusDisabledUnstyled button

Secondary color

DefaultHoverActiveFocusDisabledUnstyled button

Outline

DefaultHoverActiveFocusDisabledUnstyled button

Outline inverse

DefaultHoverActiveFocusDisabledUnstyled button

Base color

DefaultHoverActiveFocusDisabledUnstyled button

Accent cool color

DefaultHoverActiveFocusDisabledUnstyled button

Accent warm color

DefaultHoverActiveFocusDisabledUnstyled button

Big button

DefaultUnstyled button

 

Buttons With Tooltips

Show on top
Show on bottom
Show on right
Show on left

Buttons With Modals

Open default modal

Are you sure you want to continue?

Open large modal

Are you sure you want to continue?

Open modal with forced action

Your session will end soon.

Alerts & Messages

Timeline name
TimelineExamples
Event date
Display Date
Feb. 4, 2022
Body

Informative status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Warning status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Success status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Short alert message

Additional context and followup information including a link.

Emergency alert message

Additional context and followup information including a link.

Short alert message. Additional context and followup information including a link.

Emergency alert message

  • The primary emergency message and a link for supporting context.
  • Another message, and another link.
  • A final emergency message.

Short alert message. Additional context and followup information including a link.

Short alert message. Additional context and followup information including a link.

Callout & Guides (all pages callout-box)

Timeline name
TimelineExamples
Event date
Display Date
Apr. 13, 2022
Body
Custom Title Secondary Descriptive Text Learn More

Red Pandas

The red panda (Ailurus fulgens) is a mammal species native to the eastern Himalayas and southwestern China. It is listed as Endangered on the IUCN Red List because the wild population is estimated at fewer than 10,000 mature individuals and continues to decline due to habitat loss and fragmentation, poaching, and inbreeding depression. Despite its name, it is not closely related to the giant panda.

See more resources

 

Factsheet Jail Enforcement Model (JEM)View Full Size Factsheet Warrant Service Officer (WSO) ModelView Full Size

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

 

Video: YouTube Embed

Timeline name
TimelineExamples
Event date
Display Date
Feb. 7, 2022
Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Event Media
Media caption
Media Caption
Media credit
Media Credit
Media ALT Tag
Media Alt Tag
Subscribe to TimelineExamples