<!-- Default -->
<ul class="progress-list">
    <li class="progress-item progress-alert">
        <svg width="16" height="16" class="icon icon-face-pain"><use xlink:href="/assets/svg/core.svg#face-pain" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-alert" href="/foo">Submit</a>

    </li>
    <li class="progress-item progress-alert">
        <svg width="16" height="16" class="icon icon-face-pain"><use xlink:href="/assets/svg/core.svg#face-pain" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-alert" href="/foo">Submit</a>

    </li>
</ul>

<!-- Warning -->
<ul class="progress-list">
    <li class="progress-item progress-warning">
        <svg width="16" height="16" class="icon icon-alert"><use xlink:href="/assets/svg/core.svg#alert" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-warning" href="/foo">Submit</a>

    </li>
    <li class="progress-item progress-warning">
        <svg width="16" height="16" class="icon icon-alert"><use xlink:href="/assets/svg/core.svg#alert" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-warning" href="/foo">Submit</a>

    </li>
</ul>

<!-- Info -->
<ul class="progress-list">
    <li class="progress-item progress-info">
        <svg width="16" height="16" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-info" href="/foo">Submit</a>

    </li>
    <li class="progress-item progress-info">
        <svg width="16" height="16" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-info" href="/foo">Submit</a>

    </li>
</ul>

<!-- Success -->
<ul class="progress-list">
    <li class="progress-item progress-success">
        <svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-success" href="/foo">Submit</a>

    </li>
    <li class="progress-item progress-success">
        <svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
        <a class="button button-small action-success" href="/foo">Submit</a>

    </li>
</ul>

<ul class="progress-list">
	<li class="progress-item {{class}}">
		{{ icon icon }}
		Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
		{{ render button }}
	</li>
	<li class="progress-item {{class}}">
		{{ icon icon }}
		Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
		{{ render button }}
	</li>
</ul>
/* Default */
{
  "text": "Go!",
  "class": "progress-alert",
  "icon": "core/face-pain",
  "button": "@button-small--a-alert"
}

/* Warning */
{
  "text": "Go!",
  "class": "progress-warning",
  "icon": "core/alert",
  "button": "@button-small--a-warning"
}

/* Info */
{
  "text": "Go!",
  "class": "progress-info",
  "icon": "core/info-alt",
  "button": "@button-small--a-info"
}

/* Success */
{
  "text": "Go!",
  "class": "progress-success",
  "icon": "core/circle-check",
  "button": "@button-small--a-success"
}

  • Content:
    .progress-list {
      list-style: none;
      padding: 0;
    }
    
    .progress-item {
      padding: 10px $main-gutter;
      margin: 0;
      @include font-scale(m, helvetica);
      background-color: palette(ui, light);
    }
    
    .progress-item .button {
      float: right;
    }
    
    .progress-item svg {
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -3px;
    }
    
    .progress-item + .progress-item {
      border-top: 1px solid #fff;
    }
    
    .progress-item.progress-alert,
    .progress-item.progress-alert a.progress-link {
      color: palette(alert);
    }
    
    .progress-item.progress-alert svg {
      fill: palette(alert);
    }
    
    .progress-item.progress-warning,
    .progress-item.progress-warning a.progress-link {
      color: palette(warning);
    }
    
    .progress-item.progress-warning svg {
      fill: palette(warning);
    }
    
    .progress-item.progress-info,
    .progress-item.progress-info a.progress-link {
      color: palette(info);
    }
    
    .progress-item.progress-info svg {
      fill: palette(info);
    }
    
    .progress-item.progress-success {
      color: palette(type);
    }
    
    .progress-item.progress-success a.progress-link {
      color: palette(type);
    }
    
    .progress-item.progress-success svg {
      fill: palette(success);
    }
    
  • URL: /components/raw/progress-list/progress-list.scss
  • Filesystem Path: src/components/14-listings/01-atoms/01-progress-list/progress-list.scss
  • Size: 1.1 KB

Progress lists are used for things like listing blog posts that are being imported, or listing completed and pending tasks.

It’s basically showing a work-list with the outcome of each item.