Poster

Poster display content and actions on a single topic, highlighted with a media as cover. They should be easy to scan for relevant and actionable information.

  • With all elements

    preview
    code
    <div class="gh-poster gh-@container">
            <figure class="gh-poster--media gh-media-filter">
              <img src="/assets/public/media/poster-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
            </figure>
            <div class="gh-poster--overlay"></div>
            <div class="gh-poster--content">
            <div class="gh-poster--badges">
              <span class="gh-badge" data-icon="true" data-color="primary" data-size="small">Live<div class="gh-badge--icon">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.575 9.0986C4.45 9.18194 4.32292 9.1861 4.19375 9.1111C4.06458 9.0361 4 8.9236 4 8.7736V3.1486C4 2.9986 4.06458 2.8861 4.19375 2.8111C4.32292 2.7361 4.45 2.74027 4.575 2.8236L9 5.6486C9.11667 5.7236 9.175 5.82777 9.175 5.9611C9.175 6.09444 9.11667 6.1986 9 6.2736L4.575 9.0986ZM4.75 8.0986L8.1125 5.9611L4.75 3.8236V8.0986Z" fill="currentColor" />
              </svg>
            </div>
          </span>
        </div>
        <div class="gh-poster--badges">
          <span class="gh-badge" data-size="small">42.2 km</span>
          <span class="gh-badge" data-icon="true" data-size="small">647<div class="gh-badge--icon">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 5.98828C5.45 5.98828 5 5.81328 4.65 5.46328C4.3 5.11328 4.125 4.66328 4.125 4.11328C4.125 3.56328 4.3 3.11328 4.65 2.76328C5 2.41328 5.45 2.23828 6 2.23828C6.55 2.23828 7 2.41328 7.35 2.76328C7.7 3.11328 7.875 3.56328 7.875 4.11328C7.875 4.66328 7.7 5.11328 7.35 5.46328C7 5.81328 6.55 5.98828 6 5.98828ZM9.25 10.0008H2.75C2.54375 10.0008 2.36719 9.92734 2.22031 9.78047C2.07344 9.63359 2 9.45703 2 9.25078V8.82578C2 8.50911 2.07917 8.23828 2.2375 8.01328C2.39583 7.78828 2.6 7.61745 2.85 7.50078C3.40833 7.25078 3.94375 7.06328 4.45625 6.93828C4.96875 6.81328 5.48333 6.75078 6 6.75078C6.51667 6.75078 7.02917 6.81536 7.5375 6.94453C8.04583 7.0737 8.57884 7.25992 9.13651 7.50321C9.39735 7.62092 9.60648 7.79161 9.76389 8.01528C9.9213 8.23895 10 8.50911 10 8.82578V9.25078C10 9.45703 9.92656 9.63359 9.77969 9.78047C9.63281 9.92734 9.45625 10.0008 9.25 10.0008ZM2.75 9.25078H9.25V8.82578C9.25 8.69245 9.21042 8.56536 9.13125 8.44453C9.05208 8.3237 8.95417 8.23411 8.8375 8.17578C8.30417 7.91745 7.81667 7.74036 7.375 7.64453C6.93333 7.5487 6.475 7.50078 6 7.50078C5.525 7.50078 5.0625 7.5487 4.6125 7.64453C4.1625 7.74036 3.675 7.91745 3.15 8.17578C3.03333 8.23411 2.9375 8.3237 2.8625 8.44453C2.7875 8.56536 2.75 8.69245 2.75 8.82578V9.25078ZM6 5.23828C6.325 5.23828 6.59375 5.13203 6.80625 4.91953C7.01875 4.70703 7.125 4.43828 7.125 4.11328C7.125 3.78828 7.01875 3.51953 6.80625 3.30703C6.59375 3.09453 6.325 2.98828 6 2.98828C5.675 2.98828 5.40625 3.09453 5.19375 3.30703C4.98125 3.51953 4.875 3.78828 4.875 4.11328C4.875 4.43828 4.98125 4.70703 5.19375 4.91953C5.40625 5.13203 5.675 5.23828 6 5.23828Z" fill="currentColor" />
          </svg>
        </div>
      </span>
    </div>
  </div>
  <div class="gh-poster--content">
    <div class="gh-poster--meta">
      <p class="gh-text-label">Challenge</p>
      <h3 class="gh-poster--heading">An event with a long title that spans multiple rows</h3>
      <p class="gh-text-label">07.10.2023</p>
    </div>
    <a href="" class="gh-poster--button gh-stretch-link">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.2495 11.9734L8.82449 7.54844C8.67449 7.39844 8.60365 7.22344 8.61199 7.02344C8.62032 6.82344 8.69949 6.64844 8.84949 6.49844C8.99949 6.34844 9.17865 6.27344 9.38699 6.27344C9.59532 6.27344 9.77449 6.34844 9.92449 6.49844L14.8745 11.4484C14.9578 11.5318 15.0162 11.6151 15.0495 11.6984C15.0828 11.7818 15.0995 11.8734 15.0995 11.9734C15.0995 12.0734 15.0828 12.1651 15.0495 12.2484C15.0162 12.3318 14.9578 12.4151 14.8745 12.4984L9.89949 17.4734C9.74949 17.6234 9.57449 17.6943 9.37449 17.6859C9.17449 17.6776 8.99949 17.5984 8.84949 17.4484C8.69949 17.2984 8.62449 17.1193 8.62449 16.9109C8.62449 16.7026 8.69949 16.5234 8.84949 16.3734L13.2495 11.9734Z" fill="currentColor" />
      </svg>
    </a>
  </div>
</div>
    data
    [
  {
    "title": "An event with a long title that spans multiple rows",
    "tag": "Challenge",
    "date": "07.10.2023",
    "url": "#",
    "image": {
      "url": "/assets/public/media/poster-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "live": {
      "text": "Live",
      "size": "small",
      "icon": "play",
      "color": "primary"
    },
    "info": [
      {
        "text": "42.2 km",
        "size": "small",
        "icon": "",
        "color": ""
      },
      {
        "text": "647",
        "size": "small",
        "icon": "person",
        "color": ""
      }
    ]
  }
]

  • With video

    preview
    code
    <div class="gh-poster gh-@container">
            <figure class="gh-poster--media gh-media-filter">
              <video autoplay="" loop="" playsinline="" muted="" preload="auto" poster="/assets/public/media/poster-placeholder.jpg">
                <source src="/assets/public/media/video-placeholder.mp4#t=0.01" type="video/mp4">
              </video>
            </figure>
            <div class="gh-poster--overlay"></div>
            <div class="gh-poster--content">
            <div class="gh-poster--badges">
              <span class="gh-badge" data-icon="true" data-color="primary" data-size="small">Live<div class="gh-badge--icon">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.575 9.0986C4.45 9.18194 4.32292 9.1861 4.19375 9.1111C4.06458 9.0361 4 8.9236 4 8.7736V3.1486C4 2.9986 4.06458 2.8861 4.19375 2.8111C4.32292 2.7361 4.45 2.74027 4.575 2.8236L9 5.6486C9.11667 5.7236 9.175 5.82777 9.175 5.9611C9.175 6.09444 9.11667 6.1986 9 6.2736L4.575 9.0986ZM4.75 8.0986L8.1125 5.9611L4.75 3.8236V8.0986Z" fill="currentColor" />
              </svg>
            </div>
          </span>
        </div>
        <div class="gh-poster--badges">
          <span class="gh-badge" data-size="small">42.2 km</span>
          <span class="gh-badge" data-icon="true" data-size="small">647<div class="gh-badge--icon">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 5.98828C5.45 5.98828 5 5.81328 4.65 5.46328C4.3 5.11328 4.125 4.66328 4.125 4.11328C4.125 3.56328 4.3 3.11328 4.65 2.76328C5 2.41328 5.45 2.23828 6 2.23828C6.55 2.23828 7 2.41328 7.35 2.76328C7.7 3.11328 7.875 3.56328 7.875 4.11328C7.875 4.66328 7.7 5.11328 7.35 5.46328C7 5.81328 6.55 5.98828 6 5.98828ZM9.25 10.0008H2.75C2.54375 10.0008 2.36719 9.92734 2.22031 9.78047C2.07344 9.63359 2 9.45703 2 9.25078V8.82578C2 8.50911 2.07917 8.23828 2.2375 8.01328C2.39583 7.78828 2.6 7.61745 2.85 7.50078C3.40833 7.25078 3.94375 7.06328 4.45625 6.93828C4.96875 6.81328 5.48333 6.75078 6 6.75078C6.51667 6.75078 7.02917 6.81536 7.5375 6.94453C8.04583 7.0737 8.57884 7.25992 9.13651 7.50321C9.39735 7.62092 9.60648 7.79161 9.76389 8.01528C9.9213 8.23895 10 8.50911 10 8.82578V9.25078C10 9.45703 9.92656 9.63359 9.77969 9.78047C9.63281 9.92734 9.45625 10.0008 9.25 10.0008ZM2.75 9.25078H9.25V8.82578C9.25 8.69245 9.21042 8.56536 9.13125 8.44453C9.05208 8.3237 8.95417 8.23411 8.8375 8.17578C8.30417 7.91745 7.81667 7.74036 7.375 7.64453C6.93333 7.5487 6.475 7.50078 6 7.50078C5.525 7.50078 5.0625 7.5487 4.6125 7.64453C4.1625 7.74036 3.675 7.91745 3.15 8.17578C3.03333 8.23411 2.9375 8.3237 2.8625 8.44453C2.7875 8.56536 2.75 8.69245 2.75 8.82578V9.25078ZM6 5.23828C6.325 5.23828 6.59375 5.13203 6.80625 4.91953C7.01875 4.70703 7.125 4.43828 7.125 4.11328C7.125 3.78828 7.01875 3.51953 6.80625 3.30703C6.59375 3.09453 6.325 2.98828 6 2.98828C5.675 2.98828 5.40625 3.09453 5.19375 3.30703C4.98125 3.51953 4.875 3.78828 4.875 4.11328C4.875 4.43828 4.98125 4.70703 5.19375 4.91953C5.40625 5.13203 5.675 5.23828 6 5.23828Z" fill="currentColor" />
          </svg>
        </div>
      </span>
    </div>
  </div>
  <div class="gh-poster--content">
    <div class="gh-poster--meta">
      <p class="gh-text-label">Challenge</p>
      <h3 class="gh-poster--heading">An event with a long title that spans multiple rows</h3>
      <p class="gh-text-label">07.10.2023</p>
    </div>
    <a href="" class="gh-poster--button gh-stretch-link">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.2495 11.9734L8.82449 7.54844C8.67449 7.39844 8.60365 7.22344 8.61199 7.02344C8.62032 6.82344 8.69949 6.64844 8.84949 6.49844C8.99949 6.34844 9.17865 6.27344 9.38699 6.27344C9.59532 6.27344 9.77449 6.34844 9.92449 6.49844L14.8745 11.4484C14.9578 11.5318 15.0162 11.6151 15.0495 11.6984C15.0828 11.7818 15.0995 11.8734 15.0995 11.9734C15.0995 12.0734 15.0828 12.1651 15.0495 12.2484C15.0162 12.3318 14.9578 12.4151 14.8745 12.4984L9.89949 17.4734C9.74949 17.6234 9.57449 17.6943 9.37449 17.6859C9.17449 17.6776 8.99949 17.5984 8.84949 17.4484C8.69949 17.2984 8.62449 17.1193 8.62449 16.9109C8.62449 16.7026 8.69949 16.5234 8.84949 16.3734L13.2495 11.9734Z" fill="currentColor" />
      </svg>
    </a>
  </div>
</div>
    data
    [
  {
    "title": "An event with a long title that spans multiple rows",
    "tag": "Challenge",
    "date": "07.10.2023",
    "url": "#",
    "image": {
      "url": "/assets/public/media/poster-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "video": {
      "url": "/assets/public/media/video-placeholder.mp4"
    },
    "live": {
      "text": "Live",
      "size": "small",
      "icon": "play",
      "color": "primary"
    },
    "info": [
      {
        "text": "42.2 km",
        "size": "small",
        "icon": "",
        "color": ""
      },
      {
        "text": "647",
        "size": "small",
        "icon": "person",
        "color": ""
      }
    ]
  }
]

  • With fewer elements

    preview
    code
    <div class="gh-poster gh-@container">
<figure class="gh-poster--media gh-media-filter">
  <img src="/assets/public/media/poster-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
</figure>
<div class="gh-poster--overlay"></div>
  <div class="gh-poster--content">
  </div>
  <div class="gh-poster--content">
    <div class="gh-poster--meta">
      <h3 class="gh-poster--heading">Coaching</h3>
    </div>
    <a href="" class="gh-poster--button gh-stretch-link">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.2495 11.9734L8.82449 7.54844C8.67449 7.39844 8.60365 7.22344 8.61199 7.02344C8.62032 6.82344 8.69949 6.64844 8.84949 6.49844C8.99949 6.34844 9.17865 6.27344 9.38699 6.27344C9.59532 6.27344 9.77449 6.34844 9.92449 6.49844L14.8745 11.4484C14.9578 11.5318 15.0162 11.6151 15.0495 11.6984C15.0828 11.7818 15.0995 11.8734 15.0995 11.9734C15.0995 12.0734 15.0828 12.1651 15.0495 12.2484C15.0162 12.3318 14.9578 12.4151 14.8745 12.4984L9.89949 17.4734C9.74949 17.6234 9.57449 17.6943 9.37449 17.6859C9.17449 17.6776 8.99949 17.5984 8.84949 17.4484C8.69949 17.2984 8.62449 17.1193 8.62449 16.9109C8.62449 16.7026 8.69949 16.5234 8.84949 16.3734L13.2495 11.9734Z" fill="currentColor" />
      </svg>
    </a>
  </div>
</div>
    data
    [
  {
    "title": "Coaching",
    "tag": "",
    "date": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/poster-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "live": "",
    "info": ""
  }
]