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

This listing has a responsive layout

  • 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!

This listing has a vertical layout

  • 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.