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 a listing

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 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.
Warning! This is a warning message.
  • Solved
  • Locked
Twig
// Set a signifier variable
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    locked: true,
  },
  description: '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.',
  warning: 'Warning! This is a warning message.',
} only %}
HTML
Not available in plain HTML. Please use Twig.