Web 3166 generic card component

src/assets/styles/vam-style.scss

@@ -15,6 +15,7 @@
 @use "../../components/blocks/associated-contexts/associated-contexts";
 @use "../../components/blocks/background-image/background-image";
 @use "../../components/blocks/background-video/background-video";
+@use "../../components/blocks/card/card";
 @use "../../components/blocks/collection-card/collection-card";
 @use "../../components/blocks/context-page-title/context-page-title";
 @use "../../components/blocks/cookie-banner/cookie-banner";

src/components/base/icons/_icons.scss

@@ -8,7 +8,7 @@
   --icon-svg-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.335 8a6.335 6.335 0 1 1-12.67 0 6.335 6.335 0 0 1 12.67 0ZM8.609 6.946V3.242H7.391v3.706a1.218 1.218 0 1 0 1.667 1.661h3.7V7.391H9.056a1.224 1.224 0 0 0-.447-.445Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M9.859 3.335h-8.45v2.799c1.051 0 1.904.835 1.904 1.866 0 1.03-.853 1.866-1.904 1.866v2.799h8.45v-2.332h1.19v2.332h3.69V9.866c-1.052 0-1.905-.835-1.905-1.866 0-1.03.853-1.866 1.905-1.866V3.335h-3.69v2.332H9.86V3.335Zm1.19 3.499H9.86v2.332h1.19V6.834Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M1 3h14v10h-4V7.701H5V13H1V3Zm9 8.503H6v1.25h4v-1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-  --icon-svg-attention: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' id='attention'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M15 14 8 1 1 14h14ZM7 6h2l-.25 4h-1.5L7 6Zm2 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-attention: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M15 14 8 1 1 14h14ZM7 6h2l-.25 4h-1.5L7 6Zm2 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-crowded-event: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.167 2.583a1.25 1.25 0 1 1 2.5 0v.167a1.25 1.25 0 1 1-2.5 0v-.167Zm-1.28.971c-.927 0-1.678.752-1.678 1.679v.373A1.679 1.679 0 0 0 5.39 7.207a2.556 2.556 0 0 1-.014-.266v-.414c0-.83.401-1.568 1.02-2.029a1.679 1.679 0 0 0-1.51-.944Zm-.904 4.442h1.624c.165.358.41.671.714.915l-1.443.608a2.5 2.5 0 0 0-1.521 2.095l-.146 1.74H1.323v-1.49l.152-1.772c.058-.688.5-1.285 1.14-1.544l1.368-.552Zm7.945 5.337-.14-1.664a1.833 1.833 0 0 0-1.116-1.536l-1.733-.73H6.87l-1.734.73A1.833 1.833 0 0 0 4.02 11.67l-.141 1.684-.11 1.313h8.27l-.112-1.334Zm2.718 0h-2.049l-.144-1.72A2.5 2.5 0 0 0 10.93 9.52L9.488 8.91a2.523 2.523 0 0 0 .944-1.97v-.414c0-.18-.019-.357-.055-.527h1.527l1.426.615a1.833 1.833 0 0 1 1.102 1.534l.214 2.617v2.567Zm-8.08-8.098a1.862 1.862 0 0 1 3.2 1.292v.414a1.862 1.862 0 0 1-2.268 1.816l-.006-.001a1.856 1.856 0 0 1-.784-.39 1.857 1.857 0 0 1-.664-1.425v-.414c0-.502.199-.957.522-1.292Zm2.778-1.952a1.645 1.645 0 0 1 3.291 0v.366a1.645 1.645 0 0 1-3.29 0v-.366Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-lower-subdued-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m3.64 2.932-.708.707L4.23 5.172l.942-.943L3.64 2.932Zm2.356 3.065 4.007 4.006a2.833 2.833 0 1 1-4.007-4.007Zm-.825-.825a4 4 0 1 0 5.657 5.657 4 4 0 0 0-5.657-5.657ZM7.5 14.667l-.167-2h1.334l-.167 2h-1ZM1.333 7.5v1l2 .167V7.333l-2 .167Zm11.735 4.86-.707.708-1.533-1.297.943-.943 1.296 1.532Zm-10.136 0 .707.708 1.532-1.297-.942-.943-1.297 1.532Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-natural-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5 1.333h1l.167 2H7.333l.167-2Zm.5 9.5a2.833 2.833 0 1 0 0-5.667 2.833 2.833 0 0 0 0 5.667ZM8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-.667.667.167 2h1l.167-2H7.333ZM14.667 8.5l-2 .167V7.333l2 .167v1Zm-13.334-1v1l2 .167V7.333l-2 .167Zm11.735 4.86-.707.708-1.533-1.297.943-.943 1.296 1.532ZM3.639 2.932l-.707.707L4.23 5.171l.942-.942L3.64 2.932Zm-.707 9.428.707.708 1.532-1.297-.942-.943-1.297 1.532Zm9.428-9.428.708.707-1.297 1.532-.943-.942 1.532-1.297Z' clip-rule='evenodd'/%3E%3C/svg%3E");
@@ -21,4 +21,10 @@
   --icon-svg-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.375 8.376 5.141 5.904l-.927.837 3.322 3.678.464.513.464-.513 3.322-3.678-.927-.837-2.234 2.472V2.119h-1.25v6.257ZM14 12.375v1.25H2v-1.25h12Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m7.834 9.804-.186-.186a2.084 2.084 0 0 1-.346-2.49.849.849 0 0 0-1.159.018l-.277.277a3.33 3.33 0 0 0 .898 3.079l.186.185a3.333 3.333 0 0 0 4.714 0L14.3 8.052a3.333 3.333 0 0 0 0-4.714l-.186-.186a3.333 3.333 0 0 0-4.714 0l-.61.61c.366.195.711.442 1.025.743l.469-.47a2.083 2.083 0 0 1 2.946 0l.186.187a2.083 2.083 0 0 1 0 2.946L10.78 9.804a2.083 2.083 0 0 1-2.946 0ZM6.007 11.38l-.215.215A2.075 2.075 0 1 1 2.858 8.66l2.35-2.35a2.075 2.075 0 0 1 3.435 2.126l.016.017c.325.325.796.416 1.203.273a3.324 3.324 0 0 0-5.537-3.3l-2.351 2.35a3.325 3.325 0 0 0 4.701 4.702l.301-.301c-.293-.182-.57-.4-.825-.654l-.144-.144Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-person-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8 1.927c-1.312 0-2.375.962-2.375 2.149v.452c0 1.187 1.063 2.15 2.375 2.15s2.375-.963 2.375-2.15v-.452c0-1.187-1.063-2.15-2.375-2.15ZM4.145 8.71c-.586.26-.975.781-1.023 1.37l-.36 4.517h10.476l-.36-4.517c-.047-.589-.437-1.11-1.023-1.37L9.31 7.583H6.69L4.146 8.71Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-make: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.326 1.235a1.211 1.211 0 0 0-1.728.05c-1.544 1.67-3.66 4.15-4.074 5.083-.34.77-.429 1.397-.48 1.942-.009.082-.016.16-.022.236-.039.433-.069.766-.2 1.139-.128.368-.367.795-.87 1.34-.102.094-.2.196-.29.307-.811 1.002-.773 2.377.085 3.072.858.696 2.211.448 3.023-.553.811-1.001.773-2.377-.085-3.072a1.769 1.769 0 0 0-.894-.379c.05-.11.095-.22.133-.33.098-.279.155-.567.211-.855.047-.237.094-.473.163-.705a8 8 0 0 1 1.45-2.75l3.578-4.525ZM6.481 13.498c-.23-.187-.427-.79.081-1.423.34-.341.916-.773 1.388-.39.232.188.43.795-.087 1.431-.516.637-1.15.57-1.382.382ZM5.93 8.076c.158-.056.32-.098.483-.135-.013.106-.024.208-.033.306l-.024.25c-.026.296-.045.503-.086.696-.358.133-.773.372-1.296.854-.093.103-.195.2-.307.29-1 .812-2.376.774-3.072-.084C.9 9.395 1.148 8.04 2.15 7.23c1.001-.811 2.377-.773 3.072.085.212.262.336.57.378.894.111-.051.221-.095.33-.133Zm3.007.625-.01.033a5.66 5.66 0 0 0 .705-.259c.933-.412 3.413-2.53 5.082-4.073.497-.46.52-1.24.05-1.728L10.24 6.25a7.744 7.744 0 0 1-.08.064 7.334 7.334 0 0 0-1.223 2.386Zm-5.012.737c-.634.508-1.236.311-1.423.08-.188-.231-.255-.866.381-1.382.637-.516 1.244-.318 1.432-.087.383.473-.049 1.049-.39 1.389Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M1.962 5.831c0-.584.203-1.104.61-1.561.431-.458 1.015-.686 1.752-.686.787 0 1.447.267 1.98.8.534.508.8 1.257.8 2.247 0 1.397-.418 2.642-1.256 3.734-.813 1.092-1.867 2.032-3.162 2.819l-.838-1.41a11.887 11.887 0 0 0 2.057-1.714c.635-.686 1.041-1.511 1.219-2.476-.305.228-.686.343-1.143.343-.584 0-1.067-.178-1.448-.534-.38-.38-.571-.901-.571-1.562Zm7.048 0c0-.584.203-1.104.61-1.561.43-.458 1.015-.686 1.751-.686.788 0 1.448.267 1.981.8.534.508.8 1.257.8 2.247 0 1.397-.419 2.642-1.257 3.734-.812 1.092-1.866 2.032-3.162 2.819l-.838-1.41a11.887 11.887 0 0 0 2.057-1.714c.635-.686 1.042-1.511 1.22-2.476-.305.228-.686.343-1.143.343-.585 0-1.067-.178-1.448-.534-.381-.38-.571-.901-.571-1.562Z'/%3E%3C/svg%3E");
+  --icon-svg-interact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.357 3.736a2 2 0 1 0-2.953.482l.074-1.727a1.21 1.21 0 0 1 2.413-.056l.058.65.025.461.383.19Zm.976-1.07c0-.498-.137-.966-.376-1.365l.598-.299c.283.49.445 1.058.445 1.665 0 .606-.162 1.175-.445 1.665l-.598-.3c.239-.399.376-.866.376-1.365ZM4 2.667c0-.469.121-.91.334-1.292l-.597-.299a3.319 3.319 0 0 0-.404 1.592c0 .576.147 1.118.404 1.591l.597-.298A2.655 2.655 0 0 1 4 2.667Zm8.333 8.62v-3.18c0-.918-.47-1.764-1.234-2.25v2.226l-.466-.109-.133-2.43-.98-.486V7.73l-.465-.108-.158-2.874-.923-.458v3.045l-.466-.109-.224-4.093-.057-.638a.543.543 0 0 0-1.083.024l-.31 7.271-.201.084c0-1.633-.76-2.382-1.966-2.382L3.81 9.27a4.681 4.681 0 0 0 1.025 3.128l1.82 2.269h4.63l.508-1.044c.356-.728.54-1.527.54-2.338Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M15.667 8s-2 5-7.334 5C3 13 1 8 1 8s2.333-5 7.333-5 7.334 5 7.334 5Zm-5.25-.013a2.083 2.083 0 1 1-4.167 0 2.083 2.083 0 0 1 4.167 0Zm1.25 0a3.333 3.333 0 1 1-6.667 0 3.333 3.333 0 0 1 6.667 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-watch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 8 5 3v10l8-5Z'/%3E%3C/svg%3E");
+  --icon-svg-listen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.667 8a9.294 9.294 0 0 1-2.06 5.85l-.914-.726A8.133 8.133 0 0 0 13.5 8a8.133 8.133 0 0 0-1.884-5.218l.934-.701A9.295 9.295 0 0 1 14.667 8ZM12 8a6.64 6.64 0 0 1-1.483 4.192l-.914-.725A5.477 5.477 0 0 0 10.833 8c0-1.383-.51-2.647-1.353-3.613l.935-.702A6.64 6.64 0 0 1 12 8ZM9.333 8c0 .962-.34 1.845-.905 2.535l-.914-.725c.407-.491.653-1.122.653-1.81 0-.782-.317-1.49-.83-2.003l.94-.706A3.986 3.986 0 0 1 9.333 8Zm-6-2 3.334-2.667v9.334L3.333 10h-2V6h2Z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }

src/components/blocks/card/_card.scss

@@ -0,0 +1,206 @@
+@use "../../mixins";
+@use "../../base";
+
+.b-card {
+  border-bottom: 1px solid base.sitecolors-siteColor("vam-grey-4");
+  color: base.sitecolors-siteColor("vam-black");
+  display: block;
+  min-height: 380px;
+  overflow: hidden;
+  position: relative;
+
+  @include mixins.breakpoints-bpMinXSmall {
+    min-height: 480px;
+  }
+
+  &__image-container {
+    overflow: hidden;
+  }
+
+  &__image {
+    border-radius: 2px 2px 0 0;
+    height: 160px;
+    object-fit: cover;
+    transform: scale(1);
+    transition: 0.25s ease-out;
+    width: 100%;
+
+    @include mixins.breakpoints-bpMinXSmall {
+      height: 190px;
+    }
+  }
+
+  &__info-container {
+    max-width: 340px;
+    padding: 8px 10px;
+    position: relative;
+    z-index: 1;
+
+    @include mixins.breakpoints-bpMinXSmall {
+      max-width: 420px;
+    }
+
+    @include mixins.breakpoints-bpMinSmall {
+      max-width: 532px;
+    }
+  }
+
+  &__heading {
+    @include base.typography-typeSetting(4, "bold");
+
+    margin-bottom: 8px;
+
+    @include mixins.breakpoints-bpMinXSmall {
+      @include base.typography-typeSetting(5, "bold");
+    }
+  }
+
+  &__synopsis {
+    @include base.typography-typeSetting(3);
+    @include base.typography-lineheight(1);
+
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    margin-bottom: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include mixins.breakpoints-bpMinXSmall {
+      @include base.typography-typeSetting(4);
+      @include base.typography-lineheight(3);
+    }
+  }
+
+  .u-icon-label-tag {
+    top: 128px;
+    z-index: 1;
+
+    @include mixins.breakpoints-bpMinXSmall {
+      top: 158px;
+    }
+  }
+
+  &--featured {
+    .b-card__heading {
+      @include mixins.breakpoints-bpMinMedium {
+        @include base.typography-typeSetting(6, "bold");
+        @include base.typography-lineheight(6);
+      }
+    }
+
+    .b-card__synopsis {
+      @include mixins.breakpoints-bpMinMedium {
+        @include base.typography-typeSetting(5);
+        @include base.typography-lineheight(4);
+      }
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      border-bottom: none;
+      display: flex;
+      gap: 20px;
+
+      .b-card__image-container,
+      .b-card__info-container {
+        flex: 1 1 0;
+      }
+
+      .b-card__info-container {
+        border-bottom: 1px solid base.sitecolors-siteColor("vam-grey-4");
+        max-width: none;
+        padding: 16px 20px 16px 0;
+        position: static;
+      }
+
+      .u-icon-label-tag {
+        bottom: 10px;
+        top: auto;
+      }
+
+      .b-card__image {
+        border-radius: 2px 0 0 2px;
+        height: 100%;
+        position: static;
+      }
+    }
+
+    @include mixins.breakpoints-bpMinLarge {
+      gap: 30px;
+
+      .b-card__info-container {
+        padding-right: 30px;
+      }
+    }
+
+    &.b-card--picture-card {
+      @include mixins.breakpoints-bpMinMedium {
+        display: block;
+
+        .b-card__image {
+          border-radius: 2px;
+        }
+
+        .b-card__info-container {
+          border-bottom: none;
+          max-width: 532px;
+          padding: 198px 10px 8px;
+          position: relative;
+        }
+
+        .u-icon-label-tag {
+          bottom: initial;
+          top: 158px;
+        }
+      }
+    }
+  }
+
+  &--picture-card {
+    border-bottom: none;
+    color: base.sitecolors-siteColor("vam-white");
+
+    &::after {
+      background:
+        linear-gradient(
+          180deg, rgba(0, 0, 0, 0%) 0%,
+          rgba(0, 0, 0, 78%) 57%,
+          rgba(0, 0, 0, 90%) 71%,
+          #000 100%
+        );
+      border-radius: 2px;
+      content: "";
+      inset: 0;
+      opacity: 0.65;
+      position: absolute;
+    }
+
+    .b-card__image {
+      border-radius: 2px;
+      height: 100%;
+      position: absolute;
+    }
+
+    .b-card__info-container {
+      padding-top: 160px;
+
+      @include mixins.breakpoints-bpMinXSmall {
+        padding-top: 198px;
+      }
+    }
+  }
+
+  &:visited &__info-container {
+    color: base.sitecolors-siteColor("vam-grey-3");
+  }
+
+  &--picture-card:visited .b-card__info-container {
+    color: base.sitecolors-siteColor("vam-white");
+  }
+
+  &:hover &__image,
+  &:focus-visible &__image {
+    transform: scale(1.1);
+  }
+}

src/components/blocks/card/card.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+  title: 'Standard Card',
+  context: {
+    image: {
+      320: 'https://picsum.photos/id/403/320/240',
+      640: 'https://picsum.photos/id/403/640/480',
+      960: 'https://picsum.photos/id/403/960/720',
+      1280: 'https://picsum.photos/id/403/1280/960'
+    },
+    heading: 'Fashion unpicked: The \'Bar\' suit by Christian Dior',
+    synopsis: 'Watch dressmaking expert and V&A volunteer, Sue Clark, as she examines Christian Dior\'s \'Bar\' suit.'
+  },
+  variants: [
+    {
+      name: 'picture-card',
+      label: 'Picture Card',
+      context: {
+        modifier: ['picture-card']
+      }
+    },
+    {
+      name: 'featured',
+      label: 'Default - Featured',
+      context: {
+        modifier: ['featured']
+      }
+    },
+    {
+      name: 'featured-picture-card',
+      label: 'Picture Card - Featured',
+      context: {
+        modifier: ['picture-card', 'featured']
+      }
+    }
+  ]
+};

src/components/blocks/card/card.html

@@ -0,0 +1,19 @@
+<a href="#" class="b-card{% for m in modifier %} b-card--{{ m }}{% endfor %}">
+  <div class="b-card__image-container">
+    {%- render "@icon-label-tag--read" -%}
+    <img
+      alt="{{ promoTitle }}"
+      class="b-card__image"
+      srcset="{{ image["320"] }} 320w,
+              {{ image["640"] }} 640w,
+              {{ image[960] }} 960w,
+              {{ image[1280] }} 1280w"
+      sizes="100vw"
+      src="{{ image["640"] }}"
+      loading="lazy">
+  </div>
+  <div class="b-card__info-container">
+    <h2 class="b-card__heading">{{ heading }}</h2>
+    <p class="b-card__synopsis">{{ synopsis }}</p>
+  </div>
+</a>

src/components/blocks/icon-list/_icon-list.scss

@@ -4,8 +4,6 @@
 .b-icon-list {
   @include base.typography-typeSetting(2);
 
-  color: base.sitecolors-siteColor("vam-black");
-
   &--dark {
     color: base.sitecolors-siteColor("vam-white");
   }
@@ -209,5 +207,11 @@
         mask-image: var(--icon-svg-person-one);
       }
     }
+
+    &--make {
+      &::before {
+        mask-image: var(--icon-svg-make);
+      }
+    }
   }
 }

src/components/units/icon-label-tag/_icon-label-tag.scss

@@ -0,0 +1,78 @@
+@use "../../base";
+@use "../../mixins";
+
+.u-icon-label-tag {
+  @include base.typography-typeSetting(2);
+
+  align-items: center;
+  background: base.sitecolors-siteColor(vam-white);
+  border-radius: 2px;
+  color: base.sitecolors-siteColor(vam-black);
+  display: flex;
+  gap: 4px;
+  left: 10px;
+  padding: 2px 4px;
+  position: absolute;
+  top: 10px;
+
+  &__icon {
+    &::before {
+      align-items: center;
+      background-color: currentColor;
+      content: '';
+      display: flex;
+      height: 16px;
+      justify-content: center;
+      mask-repeat: no-repeat;
+      width: 16px;
+    }
+
+    &--read {
+      &::before {
+        mask-image: var(--icon-svg-quote);
+      }
+    }
+
+    &--interact {
+      &::before {
+        mask-image: var(--icon-svg-interact);
+      }
+    }
+
+    &--view {
+      &::before {
+        mask-image: var(--icon-svg-view);
+      }
+    }
+
+    &--download {
+      &::before {
+        mask-image: var(--icon-svg-download);
+      }
+    }
+
+    &--visit {
+      &::before {
+        mask-image: var(--icon-svg-pin);
+      }
+    }
+
+    &--watch {
+      &::before {
+        mask-image: var(--icon-svg-watch);
+      }
+    }
+
+    &--listen {
+      &::before {
+        mask-image: var(--icon-svg-listen);
+      }
+    }
+
+    &--make {
+      &::before {
+        mask-image: var(--icon-svg-make);
+      }
+    }
+  }
+}