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