Listing Teaser

An interactive UI element that summarizes a particular listing.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
  {% set icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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.
Listing Teaser (listing-teaser.twig)
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.

      • —
subheadline

Render the subheadline of the listing. This appears below the headline.

 any —
  • —
eyebrow_items

Render an array of eyebrow text for the listing. This appears above the headline

 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

      Use number_items prop instead.

      • —
    • replies_label

      Use number_items prop instead.

      • —
    • views

      Use number_items prop instead.

      • —
    • views_label

      Use number_items prop instead.

      • —
    • number_items

      Render custom number indicators. This will override reply count and view count.

      • —
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 —
  • —
custom_menu

Render a custom popover menu. This is completely freeform, unlike the pre-defined props like action_menu and share_menu. Assemble the popover and the menu components, and pass them to this prop.

 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
Listing teaser status number (listing-teaser-status-number.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent container.

 object —
  • —
number

Set the number value.

 any —
  • —
label

Set the label text related to the number value.

 any —
  • —
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