Listing Teaser

// 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 %}

// 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 %}

{% 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 %}

// 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&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 %}

// 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 %}

// 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 %}

{% 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 %}

{% 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 %}

{% 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 %}

{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    description_clamp: false,
    ...
  } only %}

// 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 %}

// 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 %}

// 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 %}

{% 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 %}

// 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 %}