Horizontal value bar

The horizontal value bar is a simple visual indicator used to depict quantities of an amount or attribute remaining. It enables recognition of any limits in place and amounts remaining, with basic, complex and comprehensive lockups available to maximise impact and flexibility.

Design and usage

Structure

• Variants:

  • Variant 1 - Up to 4 data points (stand-alone).
  • Variant 2 - Up to 4+ data points (with accompanying line).
  • Variant 3 - Long label format.
  • Variant 4 - With contextual notification (for metrics without explanatory content or stand-alone usage* Design Notes – Contextual Notification).
• Desktop: 5 cols or 8 cols.
• Tablet: 5 cols or 8 cols.
• Mobile: Full width.
• Left aligned (centred if full width).

• Labels:

  • Recommended to keep short and kept to a minimum (consider mobile).
  • 50 characters maximum limit.
  • Can accommodate up to 4 labels.

• Content: Can be embedded with optional content including:

  • Bullets.
  • Notification tag (For policies: Active, Expiring, Expired, Retired).
  • Data replay.
• Container: Value indicator bar to appear within container. See Design Notes.

• Stacking:

  • Desktop: 5 cols (vertical or horizontal), 8 cols (horizontal).
  • Tablet: 5 cols (vertical).
  • Mobile: Full width (vertical).

• Content: Can appear as stand-alone or in complex or comprehensive content lockups:

  • Complex: Can accommodate more detail and metrics than a basic indicator where more insights are beneficial. As a guide contains 5 different data points:

    • Title.
    • Start date/value.
    • End date/value.
    • Contextual insight.
    • Basic bullets.

  • Comprehensive: Can accommodate a more comprehensive at-a-glance view of a metric e.g. policy. As a guide contains 6-10 different data points:

    • Status badge* See Design Notes - Comprehensive - Status Badges.
    • Title.
    • Data replay (max 4 data points).
    • Start date.
    • End date.
    • Basic bullets.
    • Indented bullets.

Accessibility and screen readers

• Left aligned (centre aligned if full width).

• Stand-alone or with content:

  • In-line with left column grid of content.
  • Refer to lockup examples: Complex, Comprehensive lockups with content.

• Desktop:

  • 5 cols: side-by-side or stacked permitted.
  • 8 cols: Stacked only.

• Tablet:

  • Stacked only.

• Mobile:

  • Stacked only.

Use case and exception scenarios

• Not to be placed on dark accent colours.

• Permitted on:

  • White.
  • Light Grey.
  • Light Blue.
• Can be used in card containers in conjunction with background colours detailed above.
• Labels: Keep styling consistent i.e. appearing on same line either Regular or Semi-bold.
• Variant 2: Must be with an accompanying line of copy to reinforce indicator (see Content Lockups) or use of Contextual Notification or both.
• Flexibility to highlight particular key words i.e. use status colour - Sans Source Pro, 16px, semi bold.
• Status badges: Keep labels to a minimum (20 characters max).

Design notes:

• Component container: #FFF, outline #CCC, rounded corner radius 5px.
• Component labels: 20px in from edges of container (desktop, tablet and mobile).
• Half point mark: Dotted key line 30px height, #CCC.

• Desktop:

  • 5 column variant.

    • 495px container width.

    • Indicator:

      • 455px width.
      • 12px height.
      • Background mask: #ececec.
      • Coverage fill: See Comprehensive - Badge Statuses.
      • Rounded corner radius 5px.

    • Labels:

      • Type 1: Sans source pro 16px, #444444, Regular.
      • Type 2: Sans source pro 16px, #444444, Semi-bold.
      • Padding: From indicator 10px above and below, aligned to edges.

    • Stacking:

      • Horizontal: Can be a minimum of 30px or maximum of 130px apart (1 col width 75px with 30px/30px padding either side). NB: Flexible depending on content component is appearing with to retain legibility and clean UI.
      • Vertical: 30px vertical padding.

    • 8 column variant:

      • 810px container width.

      • Indicator:

        • 770px width.
        • 12px height.
        • Background mask: #ececec.
        • Coverage fill: See Comprehensive - Badge Statuses.
        • Rounded corner radius 5px.

      • Labels:

        • Type 1: Sans source pro 16px, #444444, Regular.
        • Type 2: Sans source pro 16px, #444444, Semi-bold.
        • Padding: From indicator 10px above and below, aligned to edges.
      • Stacking: 30px vertical padding between indicators or lockups with indicators and content.

• Tablet:

  • 5 columns:

    • 525px container width.

    • Indicator:

      • 485px width.
      • 12px height.
      • Background mask: #ececec.
      • Coverage fill: See Comprehensive - Badge Statuses.
      • Rounded corner radius 5px.

    • Labels:

      • Type 1: Sans source pro 16px, #444444, Regular.
      • Type 2: Sans source pro 16px, #444444, Semi-bold.
      • Padding: From indicator 10px above and below, aligned to edges.
    • Stacking: 30px vertical padding between indicators or lockups with indicators and content.

  • 8 columns:

    • 708px container width.

    • Indicator:

      • 668px width.
      • 12px height.
      • Background mask: #ececec.
      • Coverage fill See Comprehensive - Badge Statuses.
      • Rounded corner radius 5px.

    • Labels:

      • Type 1: Sans source pro 16px, #444444, Regular.
      • Type 2: Sans source pro 16px, #444444, Semi-bold.
      • Padding: From indicator 10px above and below, aligned to edges.
    • Stacking: 30px vertical padding between indicators or lockups with indicators and content.

• Mobile:

  • 4 columns:

    • 280 container width.

    • Indicator:

      • 240px width.
      • 12px height.
      • Background mask: #ececec.
      • Coverage fill: See Comprehensive - Badge Statuses.
      • Rounded corner radius 5px.

    • Labels:

      • Type 1: Sans source pro 16px, #444444, Regular.
      • Type 2: Sans source pro 16px, #444444, Semi-bold.
      • Padding: From indicator 10px above and below, aligned to edges.
    • Stacking: 30px vertical padding between indicators or lockups with indicators and content.

  • Content lockup padding rules:

    • Complex:

      • Title: 15px vertical padding to indicator component.

      • Bullets/copy: 20px vertical padding from indicator component.

        • 10p between bullets.

    • Comprehensive:

      • Badge: Statuses (from FW 'Notifications' pattern) - 'Active', 'Expiring', 'Expired' and 'Retired':

        • Label: Sans Source Pro, 16px, semi bold, #5C596D.
        • 15px rounded corner rectangle.
        • Active: Fill #EDF5EA.
        • Expiring: Fill #FFF5E5.
        • Expired: Fill #F8E9E9.
        • Retired: Fill #EEE.
        • 35px height.
        • Symbol icons: Based on status. Adapted from FW 'Notifications' pattern, 25px x 25px.
        • Symbol padding: Horizontal 5px in from left edge of rounded corner rectangle.
        • Symbol label padding: Horizontal 10px from left edge of badge.
      • Title: 15px vertical padding between badge.
      • Data replay: Key line #cccccc, 15px vertical padding from title, FW pattern adapted for component width.
      • Indicator: 10px vertical padding from Data Replay.

      • Bullets/copy: 20px vertical padding from indicator component:

        • 10px between bullets/sub-bullets.

      • Contextual Notifications: For use with Start/End type indicators without accompanying content or context:

        • Standard:

          • Desktop: 455px width, fill #ECf8FF (FW Palette - Accent Light Blue).
          • Text link (optional): As per FW standards - text only variant.

        • Retired:

          • Desktop: 455px width, fill #EEE (FW Palette - Light Grey).
          • Text link (optional): As per FW standards - text only variant.