V6 Clearleft Patterns

Prestige 

<div class="Prestige flow">
    <h1 class="h h-2">
        Expert speakers, engaged attendees
    </h1>
    <div class="body">
        <p>Our events attract speakers and attendees from leading national and international companies and organisations.</p>
    </div>
    <ul>
        <li><img alt="doodah" src="https://via.placeholder.com/200x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x200" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/200x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x200" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/200x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x200" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/200x150" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x200" loading="lazy" /></li>
        <li><img alt="doodah" src="https://via.placeholder.com/150x150" loading="lazy" /></li>
    </ul>
</div>
 
<div class="Prestige flow">
  <h1 class="h h-2">
    {{ title }}
  </h1>
  <div class="body">
    {{ description|raw }}
  </div>
  <ul>
    {% for logo in logos %}
      <li><img alt="{{ logo.alt }}" src="{{ logo.src }}" loading="lazy" /></li>
    {% endfor %}
  </ul>
</div>
 
{
  "title": "Expert speakers, engaged attendees",
  "description": "<p>Our events attract speakers and attendees from leading national and international companies and organisations.</p>",
  "logos": [
    {
      "src": "https://via.placeholder.com/200x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x200",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/200x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x200",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/200x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x200",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/200x150",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x200",
      "alt": "doodah"
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": "doodah"
    }
  ]
}
  • Content: 
    .Prestige {
  padding: var(--space-l-xl);
  border: 1px solid var(--dark);

  ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--space-xl-2xl);
    row-gap: var(--space-s-l);
  }

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 25%;

    img {
      object-fit: contain;
    }
  }
}
  • URL: /components/raw/prestige/prestige.css
  • Filesystem Path: src/templates/components/prestige/prestige.css
  • Size: 400 Bytes

No notes defined.