listing teaser docs

Listing Teaser

An interactive UI element that summarizes a particular listing.

Published Last updated: 5.8.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://google.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
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-v3.x @bolt/elements-button @bolt/elements-icon @bolt/elements-text-link

listing teaser

Basic Listing Teaser The Listing Teaser component can be used to display specific information of a particular listing, article, or thread. It is commonly used on listing pages. Important Notes: The whole listing UI is clickable. The headline of the listing is a link element that is expanding its click target. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Warning! This is a warning message.
  • Solved
  • Locked
Twig
// Set a signifier variable
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    size: 'large',
    color: 'teal',
  } only %}
{% endset %}

// Use the variable in the signifier prop
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  signifier: demo_icon,
  headline: {
    text: 'This is a listing',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    locked: true,
  },
  description: 'This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
  warning: 'Warning! This is a warning message.',
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser signifier

Listing Teaser Signifier The signifier is a decorative element that visually represents the content nature of a listing. Important Notes: This is a purely decorative element and is hidden from screen readers. When using an icon as the signifier, a size must be defined. It is recommended to match the size of the headline. When using an image as the signifier, a width must be defined. It is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set a signifier variable
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    size: 'large',
    color: 'teal',
  } only %}
{% endset %}

// Use the variable in the signifier prop
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  signifier: demo_icon,
  headline: {
    text: 'This listing has an icon signifier',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser headline

Listing Teaser Headline The headline’s size, HTML tag, and link attributes can be customized via props. Important Notes: While any size can be used, large and xlarge are recommended. Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop. When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target. A subheadline can be created with the subheadline prop. The prop accepts anything, even plain text. An eyebrow can be created with the eyebrow_items prop. The prop accepts an array, each eyebrow item will be separated with a solid seperator. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  eyebrow_items: [
    eyebrow_1,
    eyebrow_2,
  ],
  headline: {
    text: 'This listing has an xlarge headline',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  subheadline: 'This is a subheadline',
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.
Listing Status, Action Menu, and Share Menu A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop. Important Notes: The solved and locked status labels can be customized. Use the status.number_items prop to render status numbers. The replies and views props are deprecated. It is recommended to pass the Menu component in the action_menu prop. Additionally use the Menu component’s title prop to create a label for the action menu. It is mandatory to pass the Share component with menu display in the share_menu prop. In addition to the action_menu prop and share_menu prop, a custom menu can be built using the custom_menu prop. When building a custom menu, make sure the menu trigger is not too wide that would squish the listing teaser’s content. Demo
Twig
// Set up variables
{% set demo_action_menu %}
  {% include '@bolt-components-menu/menu.twig' with {
    title: 'More actions',
    items: [
      {
        content: 'Reply',
        icon_before: icon_reply,
      },
      {
        content: 'Favorite',
        icon_before: icon_heart,
      },
      {
        content: 'Subscribe',
        icon_before: icon_eye,
      },
    ]
  } only %}
{% endset %}
{% set demo_share_menu %}
  {% include '@bolt-components-share/share.twig' with {
    display: 'menu',
    size: 'small',
    text: 'Share this listing',
    sources: [
      {
        name: 'facebook',
        attributes: {
          href: 'https://www.facebook.com/sharer/sharer.php?u=https://google.com&amp;src=sdkpreparse'
        }
      },
      {
        name: 'twitter',
        attributes: {
          href: 'https://twitter.com/intent/tweet?url=https://google.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
        }
      },
      {
        name: 'linkedin',
        attributes: {
          href: 'https://www.linkedin.com/shareArticle?url=https://google.com'
        }
      },
      {
        name: 'email',
        attributes: {
          href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
        }
      }
    ],
    copy_to_clipboard: {
      text_to_copy: 'https://google.com'
    },
  } only %}
{% endset %}
{% set number_items %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '167',
    label: 'Replies',
  } only %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '6k',
    label: 'Views',
  } only %}
{% endset %}

// Use the variables in the appropriate props
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing has every status and menu possible',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    solved_label: 'Completed',
    locked: true,
    locked_label: 'Archived',
    number_items: number_items,
  },
  action_menu: demo_action_menu,
  share_menu: demo_share_menu,
} only %}
HTML
Not available in plain HTML. Please use Twig.
Listing Meta Data and More A listing can have meta data, a short description, and a warning. Important Notes: Meta data can be passed via the meta_items prop, each item is visually separated by a pipe. Extra content can be passed to the description prop. It will appear below the meta data. Truncating with an ellipsis and a read more button is optional. Warning content can be passed to the warning prop. It will appear below the description. A warning icon is appended at the start. Meta data, description, and warning may contain links, use the link element to render a link. This will generate a link that is not blocked by the headline link. Demo
  • Posted by username on May 21, 2020
  • Last activity: 2 minutes ago

This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus

Warning! This is a warning message.

Twig
// Render description and warning
{% set description %}
  {% set more_link %}
    {% set icon_chevron_right %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'chevron-right',
      } only %}
    {% endset %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Read more',
      icon_after: icon_chevron_right,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}
  <p>This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus&hellip;{{ more_link }}</p>
{% endset %}
{% set warning %}
  <p>Warning! This is a warning message.</p>
{% endset %}

// Pass meta data, warning, and description to the component
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing has meta data and more info',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted by <a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">username</a> on May 21, 2020',
    'Last activity: 2 minutes ago',
  ],
  description: description,
  warning: warning,
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser reply

Listing Reply A listing can show one relevant reply at a time. Content can be added by using the reply prop. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

Replied on Aug 21, 2021

This is a reply. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, repellat natus! Nemo, fugiat. Unde deserunt soluta assumenda magnam sit excepturi voluptates repudiandae iure tempore omnis? Dolorem impedit quo iusto sapiente.

Some more text. Excepturi deleniti possimus sed corrupti illo doloribus, nam nemo hic, saepe quam repellendus officiis quaerat pariatur aliquid molestiae illum natus dolore aliquam?

Go to reply

Twig
// Set up the reply content
{% set reply %}
  <p><strong>Replied on Aug 21, 2021</strong></p>
  <p>This is a reply. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, repellat natus! Nemo, fugiat. Unde deserunt soluta assumenda magnam sit excepturi voluptates repudiandae iure tempore omnis? Dolorem impedit quo iusto sapiente.</p>
  <p>Some more text. Excepturi deleniti possimus sed corrupti illo doloribus, nam nemo hic, saepe quam repellendus officiis quaerat pariatur aliquid molestiae illum natus dolore aliquam?</p>
  {% set reply_link %}
    {% set icon_chevron_right %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'chevron-right',
      } only %}
    {% endset %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Go to reply',
      icon_after: icon_chevron_right,
      attributes: {
        href: '/reply-123',
      }
    } only %}
  {%  endset %}
  {% include '@bolt-components-headline/text.twig' with {
    text: reply_link,
    tag: 'p',
    size: 'small',
  } only %}
{% endset %}

// Pass the content to the reply prop
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'RE: This is a post showing one of the replies',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  reply: reply,
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser variant

Listing Teaser Card Variant and Spacing By default, a listing teaser is transparent, but the card variant can activate card styles. Additionally, inset spacing can be adjusted for the card variant. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing is a card variant',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  variant: 'card',
  inset_spacing: 'small',
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser callout

Listing Teaser Callout A listing teaser can have a callout section. Any content can be rendered as the callout. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

This is a callout headline

This is callout text.

Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing has a callout',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  callout: {
    attributes: {
      class: 't-bolt-light',
    },
    content: callout_content,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser layout

Listing Teaser Layout and Gutter By default, a listing teaser has a horizontal layout, but it can be changed to vertical or responsive (content will wrap under the signifier at the small breakpoint). Important Notes: When using the horizontal or responive layout, the spacing between the signifier and the content can be controlled by the gutter. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias libero repellendus, dolorum vitae iste iure quas tempora! Distinctio hic ducimus excepturi adipisci est libero quia! Explicabo mollitia ad voluptatum impedit!
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias libero repellendus, dolorum vitae iste iure quas tempora! Distinctio hic ducimus excepturi adipisci est libero quia! Explicabo mollitia ad voluptatum impedit!
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  signifier: signifier,
  headline: {
    text: 'This listing has a responsive layout',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  layout: 'responsive',
  gutter: 'medium',
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser line clamp

Listing Teaser Line Clamp By defualt, a listing teaser will shorten the description after a number of lines determind by a breakpoint. Setting this prop to false will allow the entire description to be previewed. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    description_clamp: false,
    ...
  } only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Academy Training List Training List is a way to display the progression a particular course. Important Notes: A training list is composed of the Listing Teaser component and the List component with solid separators. solved_label is used for customizing the solved status label text. locked_label is used for customizing the locked status label text. Demo
Twig
// Set up a particular training
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'orbit',
    size: 'large',
    color: 'teal',
  } only %}
{% endset %}
{% set demo_training %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: demo_icon,
    headline: {
      text: 'This training is both completed and archived',
      tag: 'h3',
      size: 'large',
      link_attributes: {
        href: 'https://google.com'
      },
    },
    meta_items: [
      'Module',
      'Completed August 18, 2019',
      'Last updated August 11, 2019',
    ],
    status: {
      solved: true,
      solved_label: 'Completed',
      locked: true,
      locked_label: 'Archived',
    },
    warning: 'This training has a warning.'
  } only %}
{% endset %}

// Render a list to display trainings
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_training,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Collaboration Center Post List Post List is a way to display activities in Pega’s Collaboration Center. Important Notes: A post list is composed of the Listing Teaser component and the List component with solid separators. Demo
  • Posted by mikemai on Jun 6, 2020
  • Last activity: 8 hours 15 minutes ago

This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus… Read more

  • 167 Replies
  • 6k Views
  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hours 26 minutes ago
  • Solved
  • Locked
  • 167 Replies
  • 6k Views
Twig
// Set up a particular post
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    size: 'large',
    color: 'teal',
  } only %}
{% endset %}
{% set demo_action_menu %}
  {% include '@bolt-components-menu/menu.twig' with {
    title: 'More actions',
    items: [
      {
        content: 'Reply',
        icon_before: icon_reply,
      },
      {
        content: 'Favorite',
        icon_before: icon_heart,
      },
      {
        content: 'Subscribe',
        icon_before: icon_eye,
      },
    ]
  } only %}
{% endset %}
{% set demo_post %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: demo_icon,
    headline: {
      text: 'This is a post with actions (also favorited and subscribed)',
      tag: 'h3',
      size: 'large',
      link_attributes: {
        href: 'https://google.com'
      },
    },
    meta_items: [
      'Posted by <a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mikemai</a> on Apr 9, 2020',
      'Last activity: 8 hours 26 minutes ago',
    ],
    description: description,
    reply: reply,
    status: {
      solved: true,
      locked: true,
      number_items: number_items,
    },
    action_menu: demo_action_menu,
  } only %}
{% endset %}

// Render a list to display posts
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_post,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Article List Article List is a way to display teasers for a list of articles. Important Notes: An article list is composed of the Listing Teaser component and the List component with solid separators. Keep in mind the signifier and headline vertically center align with each other. When using image as the signifier, it is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set up a particular article
{% set demo_thumbnail %}
  <img src="/image.jpg" alt="" width=32 height=32>
{% endset %}
{% set demo_share_menu %}
  {% include '@bolt-components-share/share.twig' with {
    display: 'menu',
    size: 'small',
    text: 'Share this article',
    sources: [
      {
        name: 'facebook',
        attributes: {
          href: 'https://www.facebook.com/sharer/sharer.php?u=https://google.com&amp;src=sdkpreparse'
        }
      },
      {
        name: 'twitter',
        attributes: {
          href: 'https://twitter.com/intent/tweet?url=https://google.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
        }
      },
      {
        name: 'linkedin',
        attributes: {
          href: 'https://www.linkedin.com/shareArticle?url=https://google.com'
        }
      },
      {
        name: 'email',
        attributes: {
          href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
        }
      }
    ],
    copy_to_clipboard: {
      text_to_copy: 'https://google.com'
    },
  } only %}
{% endset %}
{% set demo_article %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: demo_thumbnail,
    headline: {
      text: 'This is an article',
      tag: 'h3',
      size: 'large',
      link_attributes: {
        href: 'https://google.com'
      },
    },
    meta_items: [
      'Category',
      'Duration',
      'Posted by Name',
    ],
    share_menu: demo_share_menu,
  } only %}
{% endset %}

// Render a list to display articles
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_article,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Search Result List Search Result List is a way to display teasers for a list of search results. Demo
  • Product

Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…

Looking for deployment guides for your environment?

Select your version to view documentation.

  • Collaboration Center

  • Question

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Solved
  • Locked
  • 167 Replies
  • 6k Views

Related videos

  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Pega Academy

  • Challenge

  • 9 tasks
  • 45 min
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Collaboration Center

  • Discussion

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Locked
  • 167 Replies
  • 6k Views
  • Design pattern

Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Collaboration Center

  • Challenge

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • 167 Replies
  • 6k Views
  • Pega Academy

  • Module

  • 5 topics
  • 1 hr 20 min
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
  • Community blog

  • Author Name
  • August 29, 2021
  • 3 min read
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Twig
{% set demo_result %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: signifier,
    layout: 'responsive', // Allow the content to wrap under the signifier when it runs out of space. Used in video listing.
    eyebrow_items: [
      eyebrow_1,
      eyebrow_2,
    ],
    headline: {
      text: 'This is a listing',
      tag: 'h3',
      size: 'xlarge',
      link_attributes: {
        href: 'https://google.com', // Or set type: 'button' for video modals.
      },
    },
    meta_items: [
      meta_item_1,
      meta_item_2,
      meta_item_3,
    ],
    description: description,
    chip_list: chip_list,
    status: {
      solved: true,
      locked: true,
      number_items: number_items,
    },
  } only %}
{% endset %}

// Render a list to display results
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_result,
    ...
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Contact List A list of contact card teasers, each displays a quick summary of a particular person. Important Notes: The custom_menu prop is being used to render a custom popover menu (the more button). The subheadline prop is being used to render the job title. The description prop is being used to render the recent-articles popover. Demo

Mike Mai

Lead Web Architect, Pega Digital IT

Twig
// Set up variables
{% set icon_map %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-map',
  } only %}
{% endset %}
{% set icon_partners %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'partners',
  } only %}
{% endset %}
{% set icon_connection_hierarchy %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-connection-hierarchy',
  } only %}
{% endset %}
{% set more_button %}
  {% set popover_content %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'More actions',
      items: [
        {
          content: 'View in Org Chart',
          icon_before: icon_connection_hierarchy,
        },
        {
          content: 'View on PeopleHub',
          icon_before: icon_partners,
        },
      ]
    } only %}
  {% endset %}
  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'More',
      size: 'xsmall',
      hierarchy: 'tertiary',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_content,
    spacing: 'none',
    placement: 'bottom-end',
  } only %}
{% endset %}
{% set signifier %}
  <img src="/images/placeholders/square.jpg" alt="" width=56 height=56 class="u-bolt-border-radius-full">
{% endset %}

// Pass variables to the component
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  gutter: 'small',
  signifier: signifier,
  layout: 'responsive',
  headline: {
    text: 'Firstname Lastname',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  subheadline: '<p><strong>Lead Web Architect</strong>, Pega Digital IT</p>',
  meta_items: [
    'Phone: <a href="tel:+1(123)-456-7890" class="e-bolt-text-link e-bolt-text-link--reversed-underline">+1(123)-456-7890</a>',
    'Email: <a href="mailto:evgeny.vyatkin@mail.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mike.mai@mail.com</a>',
    'Location: Cambridge HQ',
    'Pega ID: FLAST',
    'Hired date: May 4, 2018',
  ],
  variant: 'card',
  inset_spacing: 'small',
  custom_menu: more_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.