Listing Teaser

An interactive UI element that summarizes a particular listing.

Published Last updated: 3.4.0 Change log Github NPM
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.

 string —
  • —
Install Install 
  npm install @bolt/components-listing-teaser
Dependencies @bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/components-menu @bolt/components-popover @bolt/core-v3.x @bolt/elements-text-link