An official website of the United States government Here's how you know

01 | GRID

Our responsive grid system is composed of 12 flexible columns with fixed gutters. It is based on a max width of 1020px, but the column widths are fluid and adjust to fit any browser or device size. You can test this by resizing your browser window.

GRID BASE 1020px

GRID BASE 740px

GRID BASE 670px

1/1   100%

1/2

50%

1/3

 

33%

1/4

 

 

25%

1/6

 

 

 

 

16.6%

1/12

 

 

 

 

 

 

 

 

 

 

8.3%

GRID LAYOUT

When the grid is implemented, each column has a 15px padding on either side, which results in a 30px gutter between and a 15px gutter on the grid edges. Column widths can be mixed to create a variety of grid layouts, as seen below.

1/6

5/6

3/4

1/4

1/3

2/3

02 | COLORS

PRIMARY
  • Army White

    #FFFFFF

  • Army Gold

    #FFCC01

  • Army Black

    #221F20

  • Army Green

    #2F372F

ACCENTS
  • #727365

  • #BFB8A6

  • #F1E4C7

  • #565557

  • #D5D5D7

GREYSCALE ACCENTS
  • #030000100%

  • #1A1A1A90%

  • #33333380%

  • #4C4C4C70%

  • #66666660%

  • #7F7F7F50%

  • #99999940%

  • #B3B3B330%

  • #CCCCCC20%

  • #E5E5E510%

03 | TYPOGRAPHY

Interstate is the official typeface for Enterprise Army Brand. In order to maintain the same look and feel across all Army digital platforms, our website utilizes Overpass, which is a free, open source replacement for Interstate.

  • Headers

    Font Size & Weight

  • H1.Article title

    Medium (530), 48px

    Medium (530), 40px

    Medium (530), 40px

    Medium (530), 36px

    Medium (530), 30px

  • H2.PAGE TITLE

    Bold (700), 40px

    Bold (700), 36px

    Bold (700), 36px

    Bold (700), 30px

  • H3.PAGE TITLE

    Bold (700), 36px

    Bold (700), 30px

    Bold (700), 30px

    Bold (700), 24px

  • H4.SECTION HEADER

    Bold (700), 24px

    Bold (700), 24px

    Bold (700), 21px

  • H5.SUB-SECTION HEADER
    Bold (700), 18px

    Bold (700), 18px

    Bold (700), 16px

  • Body Text

    Normal (400), 16px

    Normal (400), 16px

    Normal (400), 16px

  • SMALL PARAGRAPH, ACCENTS (Buttons, Dropdowns, Date, Author)

    Normal (400), 14px

    Normal (400), 14px

    Normal (400), 13px

PARAGRAPH DEFAULTS

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Font size - 1em (16px)
  • Line height - 1.625em (26px)
  • Inline links - semi-bold (600), underlined on hover
  • Bottom margin - 1.25em (20px)
  • Last paragraphs in each section have a bottom margin of 0 (using the :last-child selector)

04 | ELEMENTS

TWO COLUMN CONTENT

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  1. Lorem ipsum dolor sit amet
  2. Ut enim ad minim veniam
    • nested list bullet
    • nested list bullet
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This is a challenging time for our nation and for our Army. My highest priority will be working to ensure Soldiers receive the necessary resources and training to remain the greatest land power in the world. I am confident our Army will fight and win wherever our nation asks, whenever our country calls.

NAVIGATION

NAV BAR
DROP DOWN NAV

SOCIAL MEDIA

ACCORDION

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

    Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

    Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim.

    Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.

    Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

    Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

    Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

    Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

    Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim.

    Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.

    Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

    Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

    Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

SELECT OPTION

LEADERS

This shows 3 example leader elements. Using legacy (small) image, with no biography link and with no profile image respectively.

  • Maj. Gen. Gary J. Volesky
    Eagle 6
    Maj. Gen. Andrew P. Poppas
  • Maj. Gen. JP McGee
    Eagle 6
    Maj. Gen. JP McGee
  • Eagle 7
    Command Sgt. Maj. Veronica Knapp

PHOTO SLIDESHOW

A Soldier from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, talks on an HF radio at a cross training event with U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies.
1 / 5 Show Caption + Hide Caption – A Soldier from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, talks on an HF radio at a cross training event with U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies. (Photo Credit: Mr. William B. King (5th Signal Command))
A Soldier from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, speaks to U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, at a cross training event, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies.
2 / 5 Show Caption + Hide Caption – A Soldier from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, speaks to U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, at a cross training event, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies. (Photo Credit: Mr. William B. King (5th Signal Command))
Maj. John Walton, commander of the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, speaks with U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, at a cross training event, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies.
3 / 5 Show Caption + Hide Caption – Maj. John Walton, commander of the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, speaks with U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, at a cross training event, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies. (Photo Credit: Mr. William B. King (5th Signal Command))
Maya Ruiz receives the 2016 Living Legacy Educational Scholarship from Lillie S. Cannon of Columbia Southern Education Group and Capt. Harvey of Installation Management Command on May 29. Ruiz's sister Airman 1st Class Kacey Ruiz was killed in Afghanistan when the transport plane she was in crashed in October 2015.
4 / 5 Show Caption + Hide Caption – Maya Ruiz receives the 2016 Living Legacy Educational Scholarship from Lillie S. Cannon of Columbia Southern Education Group and Capt. Harvey of Installation Management Command on May 29. Ruiz's sister Airman 1st Class Kacey Ruiz was killed in Afghanistan when the transport plane she was in crashed in October 2015. (Photo Credit: Army)
U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, set up a line-of-sight antenna ahead of a cross training event with Soldiers from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies.
5 / 5 Show Caption + Hide Caption – U.S. Army Soldiers from the 44th Expeditionary Signal Battalion, 2nd Signal Brigade, set up a line-of-sight antenna ahead of a cross training event with Soldiers from the British Army's 250th Gurkha Signal Squadron, 30th Signal Regiment, June 1, 2016 during exercise Stoney Run in Bramcote, England. Stoney Run is an annual U.S.-U.K. signal exercise designed to test and validate communications and network capabilities, and enhance interoperability and partner capacity between the two NATO Allies. (Photo Credit: Mr. William B. King (5th Signal Command))

VIDEO PLAYLIST

1 Video Title 1
2 Video Title 2
3 Video Title 3
4 Video Title 4
5 Video Title 5
6 Video Title 6
7 Video Title 7

Hot Topic Bar

Parallax Image

Example parallax

Quotes

Quote of the Day

This is a challenging time for our nation and for our Army. My highest priority will be working to ensure Soldiers receive the necessary resources and training to remain the greatest land power in the world. I am confident our Army will fight and win wherever our nation asks, whenever our country calls.

Secretary Eric Fanning

back to top