GNWT Base Theme Style Guide

7 ui-components Optional UI Components

Optional UI components can be added on a per case basis by including the gnwt-ui.css file only when needed.

Source: sass/gnwt-ui.scss, line 9

7.1 ui-components.progress Progress Meters

Progress meters can be used to visually display the percentage a task is complete using basic styles.

Default styling uses color(brand-highlight).

Source: sass/ui/progress/_progress.scss, line 1

7.1.1 ui-components.progress.linear Linear Progress

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Linear format progress meter.

A linear progress meter can be used to visually display the percentage a task is complete in a traditional horizontal bar chart, with a numeral or percentage displayed above the bar.

The HTML is made up of two nested <div> elements, one inside the other. There is .progress-linear available to be applied to the outer <div> and .overlay applied to the inner <div> to display the number above. To apply a specific percentage, apply .progress-linear-{percentage-integer} to the outer <div>.

Examples
Default styling
66 of 200 completed
110 of 200 completed
89%
.progress-linear--bold
Bold version with thicker lines
66 of 200 completed
110 of 200 completed
89%
.progress-linear--nested
Nested version, where values displayed in meters
66 of 200 completed
110 of 200 completed
89%
.progress-linear--primary
Primary brand colour
66 of 200 completed
110 of 200 completed
89%
Markup: ui/progress/_progress-linear.twig 
<div class="layout-3col">

  <div class="layout-3col__col-1">
    <div class="progress-linear {{modifier_class}} progress-linear-33">
      <div class="overlay">66 of 200 completed</div>
    </div>
  </div>

  <div class="layout-3col__col-2">
    <div class="progress-linear {{modifier_class}} progress-linear-55">
      <div class="overlay">110 of 200 completed</div>
    </div>
  </div>

  <div class="layout-3col__col-3">
    <div class="progress-linear {{modifier_class}} progress-linear-89">
      <div class="overlay">89%</div>
    </div>
  </div>

</div>
Source: sass/ui/progress/_progress-linear.scss, line 1

7.1.2 ui-components.progress.radial Radial Progress

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A radial progress meter can be used to visually display the percentage a task is complete and includes a numeral in the center of the circle.

The HTML is made up of two nested <div> elements, one inside the other. There is .progress-radial available to be applied to the outer <div> and .overlay applied to the inner <div> for the cutout and numeral. To apply a specific percentage, apply .progress-radial-{percentage-integer} to the outer <div>.

Examples
Default styling

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
.progress-radial--bold
Bold version with thicker lines

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
.progress-radial--primary
Primary brand colour

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
.progress-radial--success
Success colour

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
.progress-radial--warning
Warning colour

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
.progress-radial--danger
Danger colour

Numeral: 66 of 200

66

Numeral: 100 of 200

100

Percentage

89%
Markup: ui/progress/_progress-radial.twig 
<div class="layout-3col">

  <div class="layout-3col__col-1">
    <h3 style="text-align:center;">Numeral: 66 of 200</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-33">
      <div class="overlay">66</div>
    </div>
  </div>

  <div class="layout-3col__col-2">
    <h3 style="text-align:center;">Numeral: 100 of 200</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-50">
      <div class="overlay">100</div>
    </div>
  </div>

  <div class="layout-3col__col-3">
    <h3 style="text-align:center;">Percentage</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-89">
      <div class="overlay">89%</div>
    </div>
  </div>

</div>
Source: sass/ui/progress/_progress-radial.scss, line 1