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

This is a post with more information

  • Posted by mikemai on Jun 6, 2020
  • Last activity: 8 hours 15 minutes ago

This is the description. 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

  • 167 Replies
  • 6k Views

This is a post with actions

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hours 26 minutes ago
  • Solved
  • Locked
  • 167 Replies
  • 6k Views
Twig
// Set up a particular post {% set demo_icon %} {% include '@bolt-elements-icon/icon.twig' with { name: 'pega-chat-question', size: 'large', color: 'teal', } only %} {% endset %} {% set demo_action_menu %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'Reply', icon_before: icon_reply, }, { content: 'Favorite', icon_before: icon_heart, }, { content: 'Subscribe', icon_before: icon_eye, }, ] } only %} {% endset %} {% set demo_post %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This is a post with actions (also favorited and subscribed)', 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">mikemai</a> on Apr 9, 2020', 'Last activity: 8 hours 26 minutes ago', ], description: description, reply: reply, status: { solved: true, locked: true, number_items: number_items, }, action_menu: demo_action_menu, } only %} {% endset %} // Render a list to display posts {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_post, ] } only %}
HTML
Not available in plain HTML. Please use Twig.