Twig Usage{% set icon %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'questions',
size: 'xlarge',
color: 'teal',
} only %}
{% endset %}
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
signifier: icon,
headline: {
text: 'This is a listing',
tag: 'h3',
size: 'xlarge',
link_attributes: {
href: 'https://pega.com'
},
},
meta_items: [
'Completed August 1, 2019',
'Last updated July 12, 2019',
],
} only %}Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name
Description
Type
Default Value
Option(s)
attributes
A Drupal-style attributes object with extra attributes to append to this component.
object
—
—
signifier
Set a visual signifier for the listing. An icon or decorative image usually goes here.
any
—
—
headline
Render the headline of the listing.
object
—
text
Renderable text content of the headline.
—
tag
Set the semantic HTML tag for the headline.
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
p ,
span ,
cite ,
div
size
Set the size of the headline.
xxsmall ,
xsmall ,
small ,
medium ,
large ,
xlarge ,
xxlarge ,
xxxlarge
link_attributes
A Drupal-style attributes object with extra attributes to append to the headline link.
—
meta_items
Render an array of meta data for the listing.
array
—
—
status
Set the status of the listing.
object
—
solved
Mark the listing as solved.
—
solved_label
Set a custom label for the "solved indicator".
—
locked
Mark the listing as locked.
—
locked_label
Set a custom label for the "locked indicator".
—
replies
Set the count of replies.
—
views
Set the count of views.
—
action_menu
Render a popover action menu for the listing. Passing the Menu component is recommended.
any
—
—
share_menu
Render a popover share menu for the listing. Passing the Share component is mandatory.
any
—
—
more_info
Render more information for the listing. Short listing summary usually goes here. No links should be passed here.
string
—
—
warning
Render warning text for the listing, which appears below the "more info" content. No links should be passed here.
Basic Listing Teaser
The Listing Teaser component can be used to display specific information of a particular listing, article, or thread. It is commonly used on listing pages.
Important Notes:
The whole listing UI is clickable. The headline of the listing is a link element that is expanding its click target.
Demo
This is the more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus … Read More
Warning! This is a warning message.
Solved
Locked
33 Replies
6k Views
Twig
// Set a signifier variable
{% set demo_icon %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'questions',
size: 'large',
color: 'teal',
} only %}
{% endset %}
// Use the variable in the signifier prop
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
signifier: demo_icon,
headline: {
text: 'This is a listing',
tag: 'h3',
size: 'large',
link_attributes: {
href: 'https://pega.com'
},
},
meta_items: [
'Posted 8 hours 15 minutes ago',
'Last activity: 2 minutes ago',
],
status: {
solved: true,
locked: true,
replies: '33',
views: '6k',
},
more_info: 'This is the more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
warning: 'Warning! This is a warning message.',
} only %}
Listing Teaser Signifier
The signifier is a decorative element that visually represents the content nature of a listing.
Important Notes:This is a purely decorative element and is hidden from screen readers.When using an icon as the signifier, a size must be defined. It is recommended to match the size of the headline.When using an image as the signifier, a width must be defined. It is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline.
Demo
Listing Teaser Headline
The headline’s size, HTML tag, and link attributes can be customized via props.
Important Notes:While any size can be used, large and xlarge are recommended.Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop.When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target.
Demo
Listing Status, Action Menu, and Share Menu
A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop.
Important Notes:The solved status label can be customized.The locked status label can be customized.It is recommended to pass the Menu component in the action_menu prop. Additional use the Menu component’s title prop to create a label for the action menu.
Demo
Listing Meta Data and More
A listing can have meta data and extra information.
Important Notes:Meta data can be passed via the meta_items prop, each item is visually separated by a pipe.Meta data can contain links, use the link element to render a link. This will generate a link that is not blocked by the headline link.Extra text can be passed to the more_info prop. It will appear below the meta data. A ellipsis and “read more” text is appended at the end.Warning text can be passed to the warning prop. It will appear below the more info text. A warning icon is appended at the start.
Demo
This is more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus … Read More
Warning! This is a warning message.
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
headline: {
text: 'This listing has meta data and more info',
tag: 'h3',
size: 'large',
link_attributes: {
href: 'https://pega.com'
},
},
meta_items: [
'Posted by <a href="https://collaborate.pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">username</a> on May 21, 2020',
'Last activity: 2 minutes ago',
],
more_info: 'This is the more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
warning: 'Warning! This is a warning message.',
} only %}
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 %}
Use Case: Collaboration Center Post List
Post List is a way to display activities in Pega’s Collaboration Center.
Important Notes:
A post list is composed of the Listing Teaser component and the List component with solid separators.
Demo
More information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. … Read More
Use Case: Article List
Article List is a way to display teasers for a list of articles.
Important Notes:An article list is composed of the Listing Teaser component and the List component with solid separators.Keep in mind the signifier and headline vertically center align with each other. When using image as the signifier, it is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline.
Demo
