Skip to main content


Return to Topics Example Page

This page shows how the Timeline feature displays on a Topics Page.

Timeline Examples Title Slide

Feb. 4, 2022

Alerts & Messages

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.

Loading

Feb. 7, 2022

Video: YouTube Embed

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.

Media Alt Tag

Feb. 18, 2022

Buttons

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.

Loading

Mar. 1, 2022

Title, Body & Image

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.

Related News Releases

ICE removes former member of Guatemalan army linked to 1982 massacre

Media Alt Tag

Mar. 9, 2022

Inline Stylized Callouts

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.

Mar. 15, 2022

Title, Body & Background Color

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.

Mar. 25, 2022

Cards: USWDS

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

Apr. 1, 2022

Event Title Linked

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.

Apr. 6, 2022

Tables

Col Head 1 Col Head 2 Col Head 3
xxx xxx xxx
xxx xxx xxx
xxx xxx xxx
xxx xxx xxx

Loading

Apr. 7, 2022

Tables: With Image

Col Head 1 Col Head 2 Col Head 3
xxx xxx xxx
xxx xxx xxx
xxx xxx xxx
xxx xxx xxx
Media Alt Tag

Apr. 13, 2022

Callout & Guides (all pages callout-box)

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.

 

Apr. 23, 2022

Lists: Regular and USWDS

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?

May 16, 2022

Elements That Cannot Be Added to a Timeline

  • USWDS Accordions: Because they use a JavaScript Trigger that conflicts with the Timeline code.
  • Videos: From Akamai/NetStorage. If you want to post a video to the timeline, it must be hosted on YouTube.

 
Alerts & Messages
Feb. 4, 2022
TimelineJS

Alerts & Messages

Video: YouTube Embed

Buttons

Title, Body & Image

Inline Stylized Callouts

Title, Body & Background Color

Cards: USWDS

Event Title Linked

Tables

Tables: With Image

Callout & Guides (all pages callout-box)

Lists: Regular and USWDS

Elements That Cannot Be Added to a Timeline

Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Jan.
March
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
July
Aug.
Sept.
Oct.
Oct.
Nov.
Dec.
Jan.
Feb.
March
April
May
June
Dec. 15
Dec. 16
Dec. 17
Dec. 18
Dec. 19
Dec. 20
Dec. 21
Dec. 22
Dec. 23
Dec. 24
Dec. 25
Dec. 26
Dec. 27
Dec. 28
Dec. 29
Dec. 30
Dec. 31
Jan. 2
Jan. 3
Jan. 4
Jan. 5
Jan. 6
Jan. 7
Jan. 8
Jan. 9
Jan. 10
Jan. 11
Jan. 12
Jan. 13
Jan. 14
Jan. 15
Jan. 16
Jan. 17
Jan. 18
Jan. 19
Jan. 20
Jan. 21
Jan. 22
Jan. 23
Jan. 24
Jan. 25
Jan. 26
Jan. 27
Jan. 28
Jan. 29
Jan. 30
Jan. 31
Feb. 2
Feb. 3
Feb. 4
Feb. 5
Feb. 6
Feb. 7
Feb. 8
Feb. 9
Feb. 10
Feb. 11
Feb. 12
Feb. 13
Feb. 14
Feb. 15
Feb. 16
Feb. 17
Feb. 18
Feb. 19
Feb. 20
Feb. 21
Feb. 22
Feb. 23
Feb. 24
Feb. 25
Feb. 26
Feb. 27
Feb. 28
March 2
March 3
March 4
March 5
March 6
March 7
March 8
March 9
March 10
March 11
March 12
March 13
March 14
March 15
March 16
March 17
March 18
March 19
March 20
March 21
March 22
March 23
March 24
March 25
March 26
March 27
March 28
March 29
March 30
March 31
April 2
April 3
April 4
April 5
April 6
April 7
April 8
April 9
April 10
April 11
April 12
April 13
April 14
April 15
April 16
April 17
April 18
April 19
April 20
April 21
April 22
April 23
April 24
April 25
April 26
April 27
April 28
April 29
April 30
May 2
May 3
May 4
May 5
May 6
May 7
May 8
May 9
May 10
May 11
May 12
May 13
May 14
May 15
May 16
May 17
May 18
May 19
May 20
May 21
May 22
May 23
May 24
May 25
May 26
May 27
May 28
May 29
May 30
May 31
June 2
June 3
June 4
June 5
June 6
June 7
June 8
June 9
June 10
June 11
June 12
June 13
June 14
June 15
June 16
June 17
June 18
June 19
June 20
June 21
June 22
June 23
June 24
June 25
June 26
June 27
June 28
June 29
June 30
July 2
July 3
July 4

 

 

 

 

 

 

 

 

 

 

this is to test the z-index of the DHS bar

Updated:

You have been selected to participate in a brief survey about your experience today with ICE.gov.