Tangible Pattern Library

Card: Event 

<div class="c-card c-card--event c-card--top-image">

    <div class="c-card__content">

        <p class="c-card__title">
            <a href="#card-url" class="c-card__click-area"> Design thinking is an agile process: why, how and what's the impact on business
            </a>
        </p>

        <div class="c-card__body-text">VarGroup Webinar, 2021</div>

        <div class="c-card__authors">
            <p class="c-card__authors-label">Autori</p>
            <ul class="c-card__authors-list">
                <li class="c-card__author">John Doe</li>
                <li class="c-card__author">Barbra Streisand</li>
                <li class="c-card__author">Giovanna D'Arco</li>
            </ul>
        </div>

    </div>

</div>
 
<div class="c-card c-card--event{% if cardModifier is defined %} {{ cardModifier }}{% endif %}">

  <div class="c-card__content">
  
    {% if title is defined and title is not null %}
    <p class="c-card__title">
      {% if mainCardURL is defined and mainCardURL is not null %}<a href="{{ mainCardURL }}" class="c-card__click-area">{% endif %}
        {{ title }}
      {% if mainCardURL is defined and mainCardURL is not null %}</a>{% endif %}
    </p>
    {% endif %}
  
    {% if body is defined and body is not null %}
    <div class="c-card__body-text">{{ body }}</div>
    {% endif %}

    {% if authors is defined and authors is not null %}
    <div class="c-card__authors">
      <p class="c-card__authors-label">{{ authorsLabel }}</p>
      <ul class="c-card__authors-list">
        {% for item in authors %}
        <li class="c-card__author">{{ item.title }}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

  </div>

</div>
 
{
  "cardModifier": "c-card--top-image",
  "mainCardURL": "#card-url",
  "cardImage": null,
  "title": "Design thinking is an agile process: why, how and what's the impact on business",
  "subtitle": null,
  "body": "VarGroup Webinar, 2021",
  "chips": null,
  "actions": null,
  "authorsLabel": "Autori",
  "authors": [
    {
      "title": "John Doe"
    },
    {
      "title": "Barbra Streisand"
    },
    {
      "title": "Giovanna D'Arco"
    }
  ]
}
  • Content: 
    .c-card {
  display: flex;
  flex-direction: column;
}

.c-card__click-area {
  color: currentColor;
}

.c-card__image-block {
  overflow: hidden;
}

.c-card__image {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.c-card__content {
  // background-color: useHSL(--base-100);
  padding: spacing(space-24) 0;
}

.c-card__title {
  @include font-scale(level-5, $font-primary, extrabold);
  color: useHSL(--primary-100);
}

.c-card__subtitle {
  @include font-scale(level-4, $font-primary, regular);
  color: useHSL(--primary-100);
}

.c-card__body-text {
  @include font-scale(level-3, $font-secondary, regular);
  color: useHSL(--primary-100);
}

.c-card__title + .c-card__subtitle {
  margin-top: spacing(space-8);
}

.c-card__subtitle + .c-card__body-text {
  margin-top: spacing(space-24);
}

.c-card__chips {
  margin-bottom: spacing(space-8);
}

.c-card__actions {
  margin-top: spacing(space-12);
  margin-bottom: 0;

  a {
    display: block;
  }

}

.c-card__authors {
  display: block;
  flex-wrap: initial;
  margin: 0;
  margin-top: auto;
}

.c-card__authors-label {
  @include font-scale(level-3, $font-secondary, bold);
  color: useHSL(--primary-100);
}

.c-card__authors-list {
  list-style: none;
}

.c-card__author {
  margin: 0;
  @include font-scale(level-3, $font-secondary, regular);
}

  /*------------------------------------*
    Hover state
  *------------------------------------*/
  .c-card:hover,
  .c-card:focus-within {
    .c-card__click-area {
      color: useHSL(--accent-100);
    }
  }

/*------------------------------------*
  Bottom image
*------------------------------------*/
.c-card--bottom-image {
  flex-direction: column-reverse;
}

/*------------------------------------*
  Ratio 1:1
*------------------------------------*/
.c-card--1-1 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 100%;
    }
  }

  .c-card__image {
    aspect-ratio: 1 / 1;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 4:3 
*------------------------------------*/
.c-card--4-3 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 75%;
    }
  }

  .c-card__image {
    aspect-ratio: 4 / 3;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 3:2 
*------------------------------------*/
.c-card--3-2 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 66.67%;
    }
  }

  .c-card__image {
    aspect-ratio: 3 / 2;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 16:9 
*------------------------------------*/
.c-card--16-9 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 56.25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 9;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 16:10 
*------------------------------------*/
.c-card--16-10 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 62.50%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 10;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 9:16 
*------------------------------------*/
.c-card--9-16 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 177.78%;
    }
  }

  .c-card__image {
    aspect-ratio: 9 / 16;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 10:16 
*------------------------------------*/
.c-card--10-16 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 160%;
    }
  }

  .c-card__image {
    aspect-ratio: 10 / 16;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 3:4 
*------------------------------------*/
.c-card--3-4 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 133.33%;
    }
  }

  .c-card__image {
    aspect-ratio: 3 / 4;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ultrawide
*------------------------------------*/
.c-card--ultrawide {

  .c-card__image-block {
    max-height: remify(650px);
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 56.25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 9;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Event
*------------------------------------*/
.c-card--event {
  border: remify(1px) solid useHSL(--geyser-blue);
  padding: spacing(space-16);
  height: auto;
  min-height: remify(330px);
  // display: block;

  @include min-screen(bp(large)) {
    min-height: remify(430px);
    padding: spacing(space-24);
  }

  .c-card__content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .c-card__body-text {
    margin-top: spacing(space-4);
  }

  .c-card__author {
    float: left;
    margin-right: spacing(space-8);

    &:after {
      content: ',';
    }

  }

  .c-card__author:last-child {
    margin-right: 0;

    &:after {
      display: none;
    }

  }

}

/*------------------------------------*
  Post
*------------------------------------*/
.c-card--post {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 66.67%;
    }
  }
  
  .c-card__image {
    aspect-ratio: 3 / 2;
    @include aspect-ratio-fallback;
  }

  .c-card__authors {
    display: block;
    margin: initial;
    margin-top: spacing(space-24);
  }

  .c-card__author {
    @include font-scale(level-2, $font-secondary, bold);
    margin: 0;
  }

  .c-card__author:before {
    content: ' ';
  }

  .c-card__author + .c-card__author:before {
    content: ', ';
  }

}

/*------------------------------------*
  Centered
*------------------------------------*/
.c-card--centered {

  .c-card__title,
  .c-card__body-text,
  .c-card__image-block,
  .c-card__actions {
    text-align: center;
  }

  .c-card__content {
    @include min-screen(bp(2xlarge)) {
      max-width: remify(450px);
      margin-left: auto;
      margin-right: auto;
    }
  }

}

/*------------------------------------*
  Colors Reverse
*------------------------------------*/
.c-card--colors-reverse {

  .c-card__title,
  .c-card__subtitle,
  .c-card__body-text,
  .c-card__actions a {
    color: useHSL(--base-100);
  }

}

/*------------------------------------*
  No authors
*------------------------------------*/
.c-card--no-authors {

  .c-card__authors {
    display: none;
  }
  
}

/*------------------------------------*
  Brackets card homepage
*------------------------------------*/
.c-card--brackets-home {
  
  .c-card__image {
    max-width: remify(450px);
    object-fit: contain;
  }

}

/*------------------------------------*
  Product card
*------------------------------------*/
.c-card--product {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 4;
    @include aspect-ratio-fallback;
  }

  .c-card__content {
    background-color: useHSL(--base-100);
    padding: spacing(space-24);
  }

  .c-card__body-text {
    margin-top: spacing(space-16);
  }

  .c-card__sell-block {
    margin-top: spacing(space-16);
    margin-bottom: spacing(space-24);
  }

  .sell-block__label {
    @include font-scale(level-2, $font-secondary, regular);
    text-transform: uppercase;
    margin-bottom: spacing(space-8);
  }

  .sell-block__body {
    @include font-scale(level-4, $font-primary);
  }

}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/pattern-library/02-components/card/_card.scss
  • Size: 8.2 KB

No notes defined.