Section reference › Content

Skills / progress bars `"type": "skills"`

Text on one side and animated percentage bars on the other, with an optional photo above the bars. Use it for skills, expertise levels, project progress or survey results.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "skills",
  "eyebrow": "Our expertise",
  "title": "Fifteen years of doing one thing well",
  "text": "We are a small team of specialists, so the people you meet are the people who do the work.",
  "list": [
    "Senior team on every project",
    "Fixed prices, no surprises"
  ],
  "image": "placeholder",
  "bars": [
    {
      "label": "Brand strategy",
      "value": 95
    },
    {
      "label": "Web design",
      "value": 90
    },
    {
      "label": "Development",
      "value": 85
    },
    {
      "label": "Photography",
      "value": 75
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label above the title.
`title`	string (HTML allowed)	—	Heading on the left.
`text`	string	—	Paragraph under the title.
`list`	array of strings	—	Check-mark bullet points under the text.
`bars`	array	—	The progress bars. See the "bars" fields.
`image`	string	—	Photo shown above the bars (optional).
`reverse`	boolean	`false`	Swap sides: bars on the left, text on the right (large screens). Values: `true \| false`

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `bars`#

Option	Type	Default	Description
`label`	string	—	Bar name, e.g. "Brand strategy".
`value`	number	—	Percentage, 0 to 100 (without the % sign).

Tips#

3 to 5 bars look best.
The bars fill up with an animation when they scroll into view.

Editing it in the HTML files#

Each bar is a .bar. When you change a value, change it in three places: the number in .bar-head, the aria-valuenow of .bar-track and the --w width in the inner span's style.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/services.html (source src/demos/creative-agency/pages/services.json)
Real Estate: template/real-estate/services.html (source src/demos/real-estate/pages/services.json)
Corporate: template/corporate/services.html (source src/demos/corporate/pages/services.json)
Finance: template/finance/services.html (source src/demos/finance/pages/services.json)
Online Academy: template/education/home-2.html (source src/demos/education/pages/home-2.json)
Gym & Fitness: template/gym/trainers.html (source src/demos/gym/pages/trainers.json)
Day Spa & Salon: template/spa/therapists.html (source src/demos/spa/pages/therapists.json)
Photographer: template/photography/about.html (source src/demos/photography/pages/about.json)
Portfolio: template/portfolio/index.html (source src/demos/portfolio/pages/index.json)
Charity: template/charity/cause-clean-water.html (source src/demos/charity/pages/cause.json)
Logistics: template/logistics/about.html (source src/demos/logistics/pages/about.json)

Skills / progress bars "type": "skills"