Skip to main content
Skip table of contents

Header

FEWS NET visualizations use different header styles depending on the visualization type and context.


Usage

The primary purpose of the header is to contain the title of a visualization. Titles should be descriptive and qualitative, and should indicate key information about the type of information presented.

Only use subtitles to provide time-relevant context, such as the time period for a projected outcome, the collection date for mapped data, or detail about the nature of a time comparison.


Global

Use the global header for all charts and static maps.

BrandDocs_Header_1.png

Example application of the global header

Components

The header contains:

  • Title

  • Subtitle, if needed

  • Download button, for live charts

Padding and spacing

  • 16px on top and sides

  • 24px vertical between the last line of text and the bottom

  • 8px vertical between the title and subtitle, when a subtitle is present

  • 40px minimum horizontal space between the longest text line and the download button, when the button is present

  • 8px vertical between the title and download button, when the button is wrapped below the title

Layout and responsiveness

  • Header width fills the visualization frame

  • Header height hugs the enclosed components

  • Title hugs the left margin and the top, subtitle when present falls directly below the title and behaves identically

  • On live charts:

    • download button hugs the right margin and is vertically centered to the text

    • download button wraps below text and hugs the left margin after reaching the minimum space between the text and button

    • text lines wrap to additional lines when the visualization frame width is shorter than the text line length

Background

The header background uses White (#FFFFFF).

Buttons

For live charts, the download button is a 40px square with transparent background enclosing a centered 24px square download icon that uses USAID Black Dark (#090B09). For the hover state, the icon fill changes to Globe Green (#096640).

Typography

FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.

Style name

Font

Line height

Color

Additional specifications

Title

20px (15pt) Semibold

120%

USAID Black Dark (#090B09)

Subtitle

16px (12pt) Regular

120%

USAID Black Dark (#090B09)


Interactive - Primary

Use the primary interactive header at the top of live maps and live combined charts. For live combined charts, the primary interactive header is placed above the global header.

BrandDocs_Header_2.png

Example applications of the primary interactive header

Components

The header contains:

  • Title

  • Input, for live maps with multiple views and combined charts

Padding and Spacing

  • 12px on top, or 8px when input is present

  • 14px on bottom, or 10px when input is present

  • 12px on left margin

  • 16px on right margin, or 8px when input is present

  • 40px minimum horizontal space between the title and input, when input is present

  • 16px vertical between the title and input, when input is wrapped below the title

Layout and Responsiveness

  • For live maps, header width fills the user-interactive zone. For live combined charts, header width fills the visualization frame.

  • Header height hugs the enclosed components

  • Title hugs the left margin and is vertically centered

  • Input hugs the right margin and is vertically centered

  • Input wraps below text and hugs the left margin after the minimum space between the title and input is reached

  • Title wraps to additional lines when the visualization frame width is shorter than the title line length

Background

The header background uses Gray 1 (#F4F5F5).

Typography

FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.

Style name

Font

Line height

Color

Additional specifications

Title

20px (15pt) Semibold

120%

USAID Black Dark (#090B09)


Interactive - Secondary

Use the secondary interactive header for live maps that have layers with time-relevant information or interactivity. The secondary interactive header is always placed directly below the primary interactive header.

BrandDocs_Shape_5.png

Example applications of the secondary interactive header

Components

The header contains:

  • Subtitle

  • Reported date, if applicable

  • Time slider, if applicable

Padding and spacing

  • 8px on top

  • 12px on sides

  • 14px on bottom, or 0px when time slider is present

  • 40px minimum horizontal space between subtitle and reported date, when reported date is present

  • 4px horizontal between reported date icon and text

  • 8px additional horizontal padding between the reported date and the right edge of the header

  • 14px vertical between the last line of text and the time slider, when time slider is present

  • 8px vertical between the subtitle and reported date, when the reported date is wrapped below the title

Layout and responsiveness

  • Header width fills the user-interactive zone

  • Header height hugs the enclosed components

  • Title hugs the left margin and is vertically centered

  • Reported date hugs the right margin and is vertically centered to align with title

  • Time slider falls directly below text row, when present

  • Reported date wraps below subtitle and hugs the left margin after the minimum space between the title and reported date is reached

Background

The header background uses White (#FFFFFF).

Border

The header uses a 1px border, Stone 400 (#ADADAD), on the bottom edge

Typography

FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.

Style name

Font

Line height

Color

Additional specifications

Subtitle

16px (12pt) Regular

120%

USAID Black Dark (#090B09)

Reported date

14px (10.5pt) Regular

120%

USAID Black (#212721)

  • Use “Reported [Month] [YYYY]”

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.