Card: Colors Reverse

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-card c-card--colors-reverse">

    <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">

        <ul class="c-card__chips o-card__list">
            <li class="o-card__list-item">
                <div class="c-chip">
                    <p class="c-chip__text">Chip normal</p>
                </div>
            </li>
            <li class="o-card__list-item"><a href="#chip-click" class="c-chip c-chip--clickable">
                    <p class="c-chip__text">Chip clickable</p>
                </a> </li>
        </ul>

        <div class="c-card__title">
            <a href="#card-url" class="c-card__click-area"> Lorem ipsum dolor sit amet
            </a>
        </div>

        <div class="c-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</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>

        <ul class="c-card__actions o-card__list">
            <li class="o-card__list-item">
                <a href="#link-1" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 1</a>
            </li>
            <li class="o-card__list-item">
                <a href="#link-2" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 2</a>
            </li>
            <li class="o-card__list-item">
                <a href="#link-3" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 3</a>
            </li>
        </ul>

    </div>

</div>


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

  {# IMAGE #}
  {% 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 %}
  {# END IMAGE #}

  <div class="c-card__content">

    {# CHIPS #}
    {% if chips is defined and chips is not null %}
    <ul class="c-card__chips o-card__list">
      {% for chip in chips %}
      <li class="o-card__list-item">
        {%- set chipComponent = chip.chipVersion|default('chip--clickable') -%}
        {% include "@" ~ chipComponent with {
          text: chip.title,
          url: chip.url|default('')
        } %}
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    {# END CHIPS #}

    {# TITLE #}
    {% if title is defined and title is not null %}
    <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>
    {% endif %}
    {# END TITLE #}

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

    {# ACTIONS #}
    {% if actions is defined and actions is not null %}
    <ul class="c-card__actions o-card__list">
      {% for item in actions %}
      <li class="o-card__list-item">
        {%- set actionComponent = item.version|split('|') -%}
        {% include "@" ~ actionComponent[0] with {
          text: item.text,
          url: item.url,
          ariaLabel: item.ariaLabel|default(null),
          version: actionComponent[1]
        } %}
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    {# END ACTIONS #}

  </div>

</div>


        
            
            {
  "cardModifier": "c-card--colors-reverse",
  "mainCardURL": "#card-url",
  "cardImage": {
    "src": "//picsum.photos/640/480",
    "srcset": "//picsum.photos/640/480",
    "alt": "lorem ipsum"
  },
  "title": "Lorem ipsum dolor sit amet",
  "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"
    }
  ]
}

File:

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

Handle: @card--colors-reverse
Preview:
- With layout
- Component only
Filesystem Path: src/pattern-library/02-components/card/card.twig

No notes defined.