Progress

Normal bar

The +progress-item mixin takes the following arguments:

  • number: The number of the progress item
  • label: The text label of the progress item
  • past: Boolean flag to mark the item as a past item
  • current: Boolean flag to mark the item as a current item It accepts a block for lg platforms only.
Toggle source (Jade)
+progress-bar(3)
	+progress-item(1, 'Foo foo', false, true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(2, 'Bar bar')
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(3, 'Ham ham')
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Few items

This progress bar has the is-short state on lg which makes the grey bar not visible and the current step will get highlighted only in the title.

Toggle source (Jade)
+progress-bar(2).is-short
	+progress-item(1, 'Foo foo', true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(2, 'Bar bar', false, true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

More items

Toggle source (Jade)
+progress-bar(4)
	+progress-item(1, 'Foo foo', true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(2, 'Bar bar', true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(3, 'Ham ham', false, true)
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	+progress-item(4, 'Last one')
		p.h3 Lorem ipsum dolor sit amet.
		p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.