Listing Teaser

An interactive UI element that summarizes a particular listing.
Usage recommendations
Recommended Not Recommended
Highlight Key Information: Prioritize showing the most relevant attributes of the listing, article, or thread, like the title, a brief description, and perhaps an accompanying image, to give users a quick but informative overview. Avoid Clutter: Don't overload the Listing Teaser with too much information or visual elements, as it should serve as a simplified preview of the full listing.
For Results Listing: The listing teaser is intended to be only used on results pages to organize the content in the most efficient way (ie. search results. Don't Be Misleading: Ensure that the teaser accurately represents the content of the full listing, article, or thread. Misleading teasers can frustrate users and decrease engagement.
No Complex Interactions: Don't include complex interactions like forms or multi-level menus within the teaser. Keep it simple and direct users to a more appropriate context for detailed actions.
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://google.com'
    },
  },
  meta_items: [
    'Completed August 1, 2019',
    'Last updated July 12, 2019',
  ],
} only %}
 Schema
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 —
  • —
description_clamp

Set prop to false to remove the default line clamping on the description.

 boolean true
  • —
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-headline @bolt/components-popover @bolt/core @bolt/elements-button @bolt/elements-icon @bolt/elements-text-link