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
// Set up a particular training {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'brand-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: '' }, }, 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 %}
Not available in plain HTML. Please use Twig.