Use Case: Academy Training List Training List is a way to display the progression a particular course. Important Notes: A training list is composed of the Listing Teaser component and the List component with solid separators. solved_label is used for customizing the solved status label text. locked_label is used for customizing the locked status label text. Demo
Twig
// Set up a particular training
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'orbit',
    size: 'large',
    color: 'teal',
  } only %}
{% endset %}
{% set demo_training %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: demo_icon,
    headline: {
      text: 'This training is both completed and archived',
      tag: 'h3',
      size: 'large',
      link_attributes: {
        href: 'https://pega.com'
      },
    },
    meta_items: [
      'Module',
      'Completed August 18, 2019',
      'Last updated August 11, 2019',
    ],
    status: {
      solved: true,
      solved_label: 'Completed',
      locked: true,
      locked_label: 'Archived',
    },
    warning: 'This training has a warning.'
  } only %}
{% endset %}

// Render a list to display trainings
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_training,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.