Listing Teaser

An interactive UI element that summarizes a particular listing.

Published Last updated: 4.0.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 —
  • —
layout

Set the layout of the listing teaser based on the use case.

 string horizontal
  • vertical , horizontal , responsive
gutter

Set the spacing in between the signifier and the rest of the content.

 string small
  • small , medium , large
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.

      • —
eyebrow_items

Render an array of eyebrow text for the listing.

 array —
  • —
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 —
  • —
description

Render a short description for the listing. Listing summary usually goes here. Do not pass links here unless absolutely necessary.

 any —
  • —
warning

Render warning text for the listing, which appears below the "description" content. Do not pass links here unless absolutely necessary.

 any —
  • —
chip_list

Render a list of related chips for the resource. Passing the Chip List component is mandatory.

 object —
  • —
reply

Render a preview of a reply to the post.

 any —
  • —
callout

Render a callout section to feature important notes.

 object —
    • attributes

      A Drupal-style attributes object with extra attributes to append to the callout container.

      • —
    • content

      Render the content of the callout.

      • —
variant

Set the style variant of the listing teaser.

 string transparent
  • transparent or card
inset_spacing

Set the inset spacing of the listing teaser. This only applies to card variant.

 string medium
  • xsmall , small , medium
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