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: '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 %}