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