Tangible Pattern Library

Card: Post 

<article class="c-card c-card--post c-card--top-image">

    <a href="#card-url" class="c-card__click-area">
        <div class="c-card__image-block">
            <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
        </div>
    </a>

    <div class="c-card__content">

        <div class="c-card__title">
            <a href="#card-url" class="c-card__click-area">Ethical Compass: una bussola per esplorare la complessità</a>
        </div>

        <div class="c-card__body-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.</div>

        <div class="c-card__authors">Scritto da<span class="c-card__author">John Doe</span><span class="c-card__author">Barbra Streisand</span></div>

    </div>

</article>
 
{% set elementClass = cardModifier is defined ? cardModifier : null %}
<{{ mainCardURL is defined and mainCardURL is not null ? 'article' : 'div' }} class="c-card c-card--post {{ elementClass }}">

  {% if cardImage is defined and cardImage is not null %}
    {% if mainCardURL is defined and mainCardURL is not null %}
    <a href="{{ mainCardURL }}" class="c-card__click-area">
    {% endif %}
      <div class="c-card__image-block">
        <img class="c-card__image"
            src="{{ cardImage.src }}"
            srcset="{{ cardImage.srcset }}"
            sizes="100vw"
            loading="lazy"
            alt="{{ cardImage.alt }}" />
      </div>
    {% if mainCardURL is defined and mainCardURL is not null %}
    </a>
    {% endif %}
  {% endif %}

  <div class="c-card__content">

    {% if date is defined and date is not null %}
    <div class="c-card__body-text">{{ date | date("j F Y") }}</div>
    {% endif %}

    <div 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 %}
    </div>

    {# BODY #}
    {% if body is defined and body is not null %}
    <div class="c-card__body-text">{{ body }}</div>
    {% endif %}
    {# END BODY #}

    <div class="c-card__authors">{{ authorLabel is defined ? authorLabel : "Scritto da"|t }}
      {%- if authors -%}
        {%- for item in authors -%}<span class="c-card__author">{{- item.title -}}</span>{%- endfor -%}
      {% else %}
        <span class="c-card__author">{{- GLOBAL_LABELS.no_author -}}</span>
      {%- endif -%}
    </div>

  </div>

</{{ mainCardURL is defined and mainCardURL is not null ? 'article' : 'div' }}>
 
{
  "cardModifier": "c-card--top-image",
  "mainCardURL": "#card-url",
  "cardImage": {
    "src": "//picsum.photos/640/480",
    "srcset": "//picsum.photos/640/480",
    "alt": "lorem ipsum"
  },
  "title": "Ethical Compass: una bussola per esplorare la complessità",
  "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.",
  "chips": [
    {
      "title": "Chip normal",
      "chipVersion": "chip"
    },
    {
      "url": "#chip-click",
      "title": "Chip clickable",
      "chipVersion": "chip--clickable"
    }
  ],
  "actions": [
    {
      "text": "Link 1",
      "url": "#link-1",
      "version": "link|text-small"
    },
    {
      "text": "Link 2",
      "url": "#link-2",
      "version": "link|text-small"
    },
    {
      "text": "Link 3",
      "url": "#link-3",
      "version": "link|text-small"
    }
  ],
  "authors": [
    {
      "title": "John Doe"
    },
    {
      "title": "Barbra Streisand"
    }
  ]
}
  • 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.