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.

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 Brand 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 Brand Black Dark (#090B09). For the hover state, the icon fill changes to Brand Primary (#096640).

Typography

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

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.

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 200 (#F4F5F5).

Typography

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

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.

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 Brand White (#FFFFFF).

Border

The header uses a 1px border, Gray 500 (#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.

Contact us if you have an application question or recommended addition to these standards.