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

This listing has meta data and more info

  • 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 mus… Read more

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.