V6 Clearleft Patterns

Community 

<div class="Community flow">
    <h2 class="eyebrow">
        Join the community
    </h2>

    <div class="grid grid--7/5">
        <div class="Community__intro flow pad-after-s">
            <h3 class="h h-3">
                Connect with the very best industry thinking
            </h3>
            <div class="body flow">
                <p>Through inspiring community events, training and consultancy we connect digital leaders and their teams with globally-renowned speakers and fellow practitioners.</p>
            </div>
        </div>

        <ul role="list" class="flow Community__cards">
            <li>
                <a class="Community__card focus" href="#">
                    <img class="Community__card-img" src="/v6-assets/img/leading-design.svg" alt=" logo" />
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            Leading Design
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
            <li>
                <a class="Community__card focus" href="#">
                    <img class="Community__card-img" src="/v6-assets/img/ux-london.svg" alt=" logo" />
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            UX London
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
            <li>
                <a class="Community__card focus" href="www.google.com">
                    <img class="Community__card-img" src="/v6-assets/img/content-by-design.svg" alt=" logo" />
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            Content by Design
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
 
<div class="Community flow">
  <h2 class="eyebrow">
    {{ eyebrow }}
  </h2>

  <div class="grid grid--7/5">
    <div class="Community__intro flow pad-after-s">
      <h3 class="h h-3">
        {{ title }}
      </h3>
      <div class="body flow">
        {{ description|raw }}
      </div>
    </div>

    <ul role="list" class="flow Community__cards">
      {% for link in links %}
        <li>
          <a class="Community__card focus" href="{{ link.link }}">
            {% if link.image is defined and link.image.src is defined %}
              <img class="Community__card-img"
                src="{{ link.image.src }}"
                alt="{{ link.image.alt }} logo" />
            {% endif %}
            <div class="Community__card-content">
              <p class="eyebrow eyebrow--black">
                {{ link.title }}
              </p>
              {% include '@icon' with {
                id: 'arrow-right',
                classes: 'Community__card-arrow'
              } %}
            </div>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
 
{
  "eyebrow": "Join the community",
  "title": "Connect with the very best industry thinking",
  "description": "<p>Through inspiring community events, training and consultancy we connect digital leaders and their teams with globally-renowned speakers and fellow practitioners.</p>",
  "links": [
    {
      "title": "Leading Design",
      "link": "#",
      "image": {
        "src": "/v6-assets/img/leading-design.svg"
      }
    },
    {
      "title": "UX London",
      "link": "#",
      "image": {
        "src": "/v6-assets/img/ux-london.svg"
      }
    },
    {
      "title": "Content by Design",
      "link": "www.google.com",
      "image": {
        "src": "/v6-assets/img/content-by-design.svg"
      }
    }
  ]
}
  • Content: 
    .Community {
  &__card {
    min-height: 86px;
    display: flex;
    align-items: stretch;
    background-color: var(--light-grey-step-1);
    width: 100%;
    text-decoration: none;
    max-width: 400px;
    transition: 0.35s background-color cubic-bezier(0.25, 0.8, 0.25, 1);

    &:hover {
      background-color: var(--light-grey);

      .Icon {
        transform: translateX(4px);
      }
    }

    &-content {
      display: flex;
      justify-content: space-between;
      padding: var(--space-xs) var(--space-s);
      align-items: center;
      flex: 1;
    }

    .Icon {
      flex-shrink: 0;
      margin-left: var(--space-s);
      transition: 0.35s transform cubic-bezier(0.25, 0.8, 0.25, 1);
    }
  }

  &__card-img {
    width: 86px;
    height: 86px;
    height: 100%;
    object-fit: cover;
  }

  &__card-title:only-child {
    margin: 0 auto;
  }
}

@media screen and (min-width: 50rem) {
  .Community {
    &__intro > * {
      max-width: 555px;
    }

    &__cards {
      padding-top: var(--space-xs);
    }

    &__card {
      max-width: 372px;
    }
  }
}
  • URL: /components/raw/community/community.css
  • Filesystem Path: src/templates/components/_deprecated/community/community.css
  • Size: 1.1 KB

No notes defined.