bootstrap-italia 2.15.1 → 2.16.0

package/src/scss/components/_card.scss

@@ -1,949 +1,802 @@
 @use 'sass:math';
 
-//
-// Base styles
-//
+// Special list for long groups of cards, bootstrap row/cols grid
+ul.row.it-card-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 
-.card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
-  color: var(--#{$prefix}card-color);
+  > li.col,
+  > li[class*='col-'] {
+    border: none;
+    background: transparent;
+    margin-top: 0;
+    display: block;
+    transition: none;
+  }
 }
 
-.card-title {
-  margin-bottom: var(--#{$prefix}card-title-spacer-y);
-}
+// Improved responsive it-card-group with a @container aware twist
+.it-card-group {
+  --#{$prefix}it-card-group-gap: #{$grid-gutter-width};
 
-.card-subtitle {
-  margin-top: calc(-0.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: 0;
-}
+  display: flex;
+  flex-wrap: wrap;
 
-.card-text:last-child {
-  margin-bottom: 0;
-}
+  // gap fallback
+  margin: calc(-0.5 * var(--#{$prefix}it-card-group-gap));
 
-.card-link {
-  &:hover {
-    text-decoration: if($link-hover-decoration == underline, none, null);
-  }
+  > .it-card {
+    margin: calc(0.5 * var(--#{$prefix}it-card-group-gap));
+    // Default stacked on mobile
+    flex: 0 0 calc(100% - var(--#{$prefix}it-card-group-gap));
 
-  + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
-  }
-}
-
-//
-// Optional textual caps
-//
+    // Responsive breakpoints
+    @include media-breakpoint-up(sm) {
+      flex: 0 0 calc(50% - 0.5 * var(--#{$prefix}it-card-group-gap));
+    }
 
-.card-header {
-  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: var(--#{$prefix}card-cap-color);
-  background-color: var(--#{$prefix}card-cap-bg);
-  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    @include media-breakpoint-up(md) {
+      flex: 0 0 calc(33.333% - 0.667 * var(--#{$prefix}it-card-group-gap));
+    }
 
-  &:first-child {
-    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+    @include media-breakpoint-up(lg) {
+      flex: 0 0 calc(25% - 0.75 * var(--#{$prefix}it-card-group-gap));
+    }
   }
-}
 
-.card-footer {
-  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-  color: var(--#{$prefix}card-cap-color);
-  background-color: var(--#{$prefix}card-cap-bg);
-  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  @supports (gap: var(--#{$prefix}it-card-group-gap)) {
+    margin: 0;
+    gap: var(--#{$prefix}it-card-group-gap);
 
-  &:last-child {
-    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+    > .it-card {
+      margin: 0;
+    }
   }
-}
-
-//
-// Header navs
-//
-
-.card-header-tabs {
-  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  border-bottom: 0;
 
-  .nav-link.active {
-    background-color: var(--#{$prefix}card-bg);
-    border-bottom-color: var(--#{$prefix}card-bg);
+  // Predefined column layouts
+  &.it-card-group-2-cols > .it-card,
+  &.it-card-group-3-cols > .it-card,
+  &.it-card-group-4-cols > .it-card {
+    @include media-breakpoint-up(sm) {
+      flex: 0 0 calc(50% - 0.5 * var(--#{$prefix}it-card-group-gap));
+    }
   }
-}
 
-.card-header-pills {
-  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-}
+  &.it-card-group-3-cols > .it-card {
+    @include media-breakpoint-up(md) {
+      flex: 0 0 calc(33.333% - 0.667 * var(--#{$prefix}it-card-group-gap));
+    }
+  }
 
-// Card image
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: var(--#{$prefix}card-img-overlay-padding);
-  @include border-radius(var(--#{$prefix}card-inner-border-radius));
-}
+  &.it-card-group-4-cols > .it-card {
+    @include media-breakpoint-up(md) {
+      flex: 0 0 calc(33.333% - 0.667 * var(--#{$prefix}it-card-group-gap));
+    }
 
-.card-img,
-.card-img-top,
-.card-img-bottom {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-}
+    @include media-breakpoint-up(lg) {
+      flex: 0 0 calc(25% - 0.75 * var(--#{$prefix}it-card-group-gap));
+    }
+  }
 
-.card-img,
-.card-img-top {
-  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-}
+  // Progressive enhancement with Container Queries
+  @supports (container-type: inline-size) {
+    // Only with .it-card-group-container-aware class
+    &.it-card-group-container-aware {
+      container-type: inline-size;
 
-.card-img,
-.card-img-bottom {
-  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-}
+      > .it-card {
+        // Reset Media Queries
+        @include media-breakpoint-up(sm) {
+          flex: auto;
+        }
 
-//
-// Card groups
-//
+        @include media-breakpoint-up(md) {
+          flex: auto;
+        }
 
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: var(--#{$prefix}card-group-margin);
-  }
+        @include media-breakpoint-up(lg) {
+          flex: auto;
+        }
 
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
+        // Container Queries
+        flex: 1 0 100%;
 
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
+        @container (min-width: 500px) {
+          flex: 0 0 calc(50% - 0.5 * var(--#{$prefix}it-card-group-gap));
+        }
 
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-end-radius(0);
+        @container (min-width: 800px) {
+          flex: 0 0 calc(33.333% - 0.667 * var(--#{$prefix}it-card-group-gap));
+        }
 
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
+        @container (min-width: 1100px) {
+          flex: 0 0 calc(25% - 0.75 * var(--#{$prefix}it-card-group-gap));
         }
+      }
 
-        &:not(:first-child) {
-          @include border-start-radius(0);
+      // Override specific coulmns in container mode
+      &.it-card-group-2-cols > .it-card {
+        @container (min-width: 500px) {
+          flex: 0 0 calc(50% - 0.5 * var(--#{$prefix}it-card-group-gap));
+        }
+      }
 
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
+      &.it-card-group-3-cols > .it-card {
+        @container (min-width: 800px) {
+          flex: 0 0 calc(33.333% - 0.667 * var(--#{$prefix}it-card-group-gap));
         }
       }
     }
   }
-}
 
-.card-wrapper {
-  padding-bottom: $v-gap * 3;
-  display: flex;
-
-  &.card-column {
-    flex-direction: column;
+  // Option for equal height cards
+  &.it-card-group-equal-height > .it-card {
+    height: 100%;
+  }
 
-    .card {
-      height: auto !important;
+  // Options for alignments
+  &.it-card-group-center {
+    justify-content: center;
+  }
 
-      & + .card {
-        margin-top: 1rem;
-      }
-    }
+  &.it-card-group-end {
+    justify-content: flex-end;
   }
+}
 
-  &.card-teaser-wrapper {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
+//
+// Base card structure It Card 2025
+//
+.it-card,
+article.it-card {
+  --#{$prefix}it-card-bg: #{$white};
+  --#{$prefix}it-card-body-spacer: 1rem;
+  --#{$prefix}it-card-border-color: #{$gray-border};
+  --#{$prefix}it-card-border-radius: 4px;
+  --#{$prefix}it-card-border-top-color: transparent; // default background set to transparent
+  --#{$prefix}it-card-border-top-width: 6px;
+  --#{$prefix}it-card-border-outside-width: 1px; // xxx change to 2px if needed
+  --#{$prefix}it-card-border-separator-width: 1px; // xxx change to 2px if needed
+  --#{$prefix}it-card-cap-bg: transparent;
+  --#{$prefix}it-card-cap-color: null;
+  --#{$prefix}it-card-cap-padding-x: var(--#{$prefix}it-card-spacer-x);
+  --#{$prefix}it-card-cap-padding-y: calc(var(--#{$prefix}it-card-spacer-y) * 2);
+  --#{$prefix}it-card-category-color: #{$color-text-muted};
+  --#{$prefix}it-card-category-fw: 600;
+  --#{$prefix}it-card-category-l-spacing: 0.5px;
+  --#{$prefix}it-card-category-m-bottom: 0;
+  --#{$prefix}it-card-category-size: 1rem;
+  --#{$prefix}it-card-chips-a-color: #{$color-text-secondary};
+  --#{$prefix}it-card-chips-gap: 1rem;
+  --#{$prefix}it-card-color: #{$color-text-secondary};
+  --#{$prefix}it-card-date-color: #{$color-text-muted};
+  --#{$prefix}it-card-date-size: 0.875rem;
+  --#{$prefix}it-card-description-color: #{$color-text-muted};
+  --#{$prefix}it-card-height: auto;
+  --#{$prefix}it-card-inline-min-height: 240px;
+  --#{$prefix}it-card-inline-mini-min-height: 160px;
+  --#{$prefix}it-card-inner-border-radius: subtract(var(--#{$prefix}it-card-border-radius), var(--#{$prefix}it-card-border-outside-width));
+  --#{$prefix}it-card-link-color: #{$color-text-secondary};
+  --#{$prefix}it-card-list-group-item-padding-y: 0.75rem;
+  --#{$prefix}it-card-p-color: #{$color-text-secondary};
+  --#{$prefix}it-card-signature-size: 1rem;
+  --#{$prefix}it-card-spacer-x: 1rem;
+  --#{$prefix}it-card-spacer-y: 0.5rem;
+  --#{$prefix}it-card-double-spacer-y: calc(2 * var(--#{$prefix}it-card-spacer-y));
+  --#{$prefix}it-card-quad-spacer-y: calc(4 * var(--#{$prefix}it-card-spacer-y));
+  --#{$prefix}it-card-title-spacer-y: var(--#{$prefix}it-card-spacer-y);
 
-    &.card-teaser-wrapper-equal {
-      align-items: stretch;
-    }
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: var(--#{$prefix}it-card-height);
+  padding: 0 0 var(--#{$prefix}it-card-spacer-y) 0;
+  position: relative;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  background-color: var(--#{$prefix}it-card-bg);
+  background-clip: border-box;
+  color: var(--#{$prefix}it-card-color);
 
-    & > .card-teaser {
-      flex: 0 0 100%;
-      margin: $v-gap * 2 0;
-      display: flex;
-      flex-wrap: wrap;
+  &.border {
+    border-width: var(--#{$prefix}it-card-border-outside-width) !important;
+  }
 
-      &.border {
-        border-color: $border-color;
-      }
+  &.it-card-height-full {
+    height: 100%;
+  }
 
-      &.card-teaser-image {
-        padding: 0 !important;
+  .it-card-link {
+    color: var(--#{$prefix}it-card-link-color);
 
-        & > .card-image-wrapper {
-          flex: 1;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: flex-start;
+    &:hover {
+      color: color-hover($color-text-secondary);
+    }
 
-          &.with-read-more {
-            .card-image-rounded img {
-              border-bottom-right-radius: 0 !important;
-            }
-          }
-        }
-      }
+    + .it-card-link {
+      margin-left: var(--#{$prefix}it-card-spacer-x);
     }
+  }
 
-    .card-flex {
+  // Profile card
+  &.it-card-profile {
+    .it-card-profile-header {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap-reverse;
       justify-content: space-between;
-      align-items: stretch;
-      position: relative;
+      align-items: center;
+
+      // Gap fallback
+      > * {
+        margin: 0.5rem;
+      }
 
-      .card-image {
-        position: relative;
-        // background-color: $gray-border;
-        background-color: transparent;
+      @supports (gap: 1rem) {
+        gap: 1rem;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        > * {
+          margin: 0;
+        }
+      }
 
-        &.card-image-rounded {
-          border-radius: 0 $border-radius $border-radius 0;
+      margin-top: calc(2 * var(--#{$prefix}it-card-title-spacer-y));
+      margin-bottom: var(--#{$prefix}it-card-title-spacer-y);
+      padding: 0 var(--#{$prefix}it-card-spacer-x);
 
-          img {
-            border-radius: 0 $border-radius $border-radius 0;
-          }
+      .it-card-profile {
+        flex: 1;
+        max-width: 100%;
+
+        .it-card-profile-name {
+          margin-bottom: 0.25rem;
         }
 
-        .card-date {
-          background-color: $white;
-          padding: 0.5em 1em;
-          z-index: 1;
+        .it-card-profile-role,
+        .it-card-place-type {
+          font-weight: 600;
+          font-size: 1rem;
+          line-height: 1.5rem;
+          margin-bottom: 0;
+        }
+      }
 
-          & > *:first-child {
-            font-size: 120%;
-          }
+      .it-card-profile-image {
+        max-width: 80px;
+        max-height: 80px;
 
-          & > *:last-child {
-            font-size: 80%;
-          }
+        figure {
+          margin-bottom: 0;
         }
 
-        img {
-          z-index: auto;
-          object-fit: cover;
+        .it-card-profile-image-icon-wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          background-color: $color-background-primary-lighter;
         }
       }
     }
+  }
 
-    //Landscape
-    @include media-breakpoint-up(md) {
-      .card-teaser {
-        flex: 0 0 49%;
-      }
+  // Card title styles
+  .it-card-title {
+    margin-top: calc(2 * var(--#{$prefix}it-card-title-spacer-y));
+    margin-bottom: 0;
+    padding: 0 var(--#{$prefix}it-card-spacer-x);
 
-      &.card-teaser-block-2 {
-        width: 100%;
-        justify-content: space-between;
+    &.it-card-title-icon {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-right: -8px;
 
-        & > .card-teaser {
-          flex: 0 0 49%;
-        }
+      // Gap fallback
+      > * {
+        margin: 0.25rem;
       }
 
-      &.card-teaser-block-3 {
-        width: 100%;
-        justify-content: space-between;
+      @supports (gap: 0.5rem) {
+        gap: 0.5rem;
 
-        & > .card-teaser {
-          flex: 0 0 32%;
+        > * {
+          margin: 0;
         }
       }
 
-      &.card-teaser-start {
-        justify-content: flex-start !important;
+      .it-card-title-icon-wrapper {
+        display: flex;
+        align-items: center;
+      }
+
+      // linked titles with icons goes fullwidth
+      > a {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
 
-        .card-teaser + .card-teaser {
-          margin-left: 1.35rem;
+        // Gap fallback
+        > * {
+          margin: 0.25rem;
         }
-      }
 
-      &.card-teaser-end {
-        justify-content: flex-end !important;
+        @supports (gap: 0.5rem) {
+          gap: 0.5rem;
 
-        .card-teaser + .card-teaser {
-          margin-left: 1.35rem;
+          > * {
+            margin: 0;
+          }
         }
       }
     }
   }
 
-  //Desktop
-  @include media-breakpoint-up(xl) {
-    &.card-teaser-block-4 {
-      width: 100%;
-      justify-content: space-between;
+  // Card body and content
+  .it-card-body {
+    flex: 1 1 auto;
+    padding: var(--#{$prefix}it-card-spacer-y) var(--#{$prefix}it-card-spacer-x);
+    color: var(--#{$prefix}it-card-color);
+
+    // Card subtitle or event timeframe
+    .it-card-subtitle {
+      margin-bottom: var(--#{$prefix}it-card-spacer-y);
 
-      & > .card-teaser {
-        flex: 0 0 24%;
+      font-weight: 600;
+      font-size: 1.25rem; // equal h5
+      line-height: 1.5rem;
+
+      @include media-breakpoint-up(sm) {
+        font-size: 1.5rem;
+        line-height: 2rem;
       }
     }
 
-    &.card-overlapping {
-      margin-top: -32px;
-    }
-  }
-}
+    // Card description
+    .it-card-text {
+      color: var(--#{$prefix}it-card-p-color);
+      font-size: 1rem;
+      line-height: 1.5rem;
 
-.card {
-  // scss-docs-start card-css-vars
-  --#{$prefix}card-spacer-y: #{$card-spacer-y};
-  --#{$prefix}card-spacer-x: #{$card-spacer-x};
-  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
-  --#{$prefix}card-border-width: #{$card-border-width};
-  --#{$prefix}card-border-color: #{$card-border-color};
-  --#{$prefix}card-border-radius: #{$card-border-radius};
-  --#{$prefix}card-box-shadow: #{$card-box-shadow};
-  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
-  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
-  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
-  --#{$prefix}card-cap-bg: #{$card-cap-bg};
-  --#{$prefix}card-cap-color: #{$card-cap-color};
-  --#{$prefix}card-height: #{$card-height};
-  --#{$prefix}card-color: #{$card-color};
-  --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
-  --#{$prefix}card-group-margin: #{$card-group-margin};
-  // scss-docs-end card-css-vars
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: var(--#{$prefix}card-height);
-  word-wrap: break-word;
-  background-color: var(--#{$prefix}card-bg);
-  background-clip: border-box;
-  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
-  @include border-radius(var(--#{$prefix}card-border-radius));
-  @include box-shadow(var(--#{$prefix}card-box-shadow));
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
 
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
+    // Card author
+    .it-card-signature {
+      font-family: $font-family-monospace;
+      color: var(--#{$prefix}it-card-color);
+      font-size: var(--#{$prefix}it-card-signature-size);
+    }
   }
 
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
-
-    &:first-child {
-      border-top-width: 0;
-      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-    }
+  // Card footer cap
+  .it-card-footer {
+    margin: 0 var(--#{$prefix}it-card-cap-padding-x);
+    padding: var(--#{$prefix}it-card-cap-padding-y) 0;
+    color: var(--#{$prefix}it-card-cap-color);
+    background-color: var(--#{$prefix}it-card-cap-bg);
+    border-top: var(--#{$prefix}it-card-border-separator-width) solid var(--#{$prefix}it-card-border-color);
+    font-size: 1rem;
+    line-height: 1.5rem;
 
     &:last-child {
-      border-bottom-width: 0;
-      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+      @include border-radius(0 0 var(--#{$prefix}it-card-inner-border-radius) var(--#{$prefix}it-card-inner-border-radius));
     }
   }
 
-  // Due to specificity of the above selector (`.card > .list-group`), we must
-  // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
-  border: none;
-  padding: 0;
-  position: relative;
-  width: 100%;
+  // Card metadata holder <footer>
+  footer {
+    margin-top: var(--#{$prefix}it-card-double-spacer-y);
 
-  @each $color, $value in $theme-colors {
-    &.card-bg-#{$color} {
-      background-color: $value;
+    &.it-card-related {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-end;
 
-      .card-body {
-        .card-title,
-        .card-text {
-          color: $white;
-        }
+      // Gap fallback
+      > * {
+        margin: 0.5rem;
       }
-    }
-  }
 
-  .card-body {
-    padding: $card-padding;
+      @supports (gap: 1rem) {
+        gap: 1rem;
 
-    h4 {
-      &.card-title {
-        & + .card-text {
-          padding-top: 16px;
+        > * {
+          margin: 0;
         }
       }
-    }
 
-    h5 {
-      &.card-title {
-        font-size: $card-h5-size;
-        line-height: $card-h5-line-height;
-        font-weight: $card-h5-fw;
-        color: $card-h5-color;
-        margin-bottom: $v-gap * 2;
-        transition: all 0.3s;
-        &.big-heading {
-          font-size: $card-big-head-size;
-          line-height: $card-big-head-l-h;
-        }
+      // Align items baseline and fallback
+      align-items: flex-end;
 
-        &.card-title-icon {
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-start;
-          align-items: center;
+      @supports (align-items: last baseline) {
+        align-items: last baseline;
+      }
 
-          .icon {
-            margin-right: 0.5em;
-          }
-        }
+      &.it-card-footer {
+        padding-bottom: var(--#{$prefix}it-card-cap-padding-y);
+        padding-top: calc(var(--#{$prefix}it-card-cap-padding-y) * 0.5);
+        border-top: none;
       }
     }
-    h6.card-subtitle {
-      font-weight: normal;
-      margin-bottom: $v-gap * 2;
-      margin-top: -$v-gap * 2;
+
+    .it-card-taxonomy {
+      flex-grow: 1;
     }
-    a {
+
+    .it-card-category {
       display: inline-block;
-      h5.card-title {
-        color: $card-link-color;
+      text-transform: uppercase;
+      color: var(--#{$prefix}it-card-category-color);
+      font-size: var(--#{$prefix}it-card-category-size);
+      font-weight: var(--#{$prefix}it-card-category-fw);
+      letter-spacing: var(--#{$prefix}it-card-category-l-spacing);
+      margin-bottom: var(--#{$prefix}it-card-category-m-bottom);
+    }
+
+    // If more than one Tag, use a list
+    ul.it-card-chips {
+      display: flex;
+      flex-wrap: wrap;
+
+      // Gap fallback
+      > li {
+        margin: 0.25rem;
       }
-      &:hover {
-        h5.card-title {
-          color: var(--bs-link-hover-color);
+
+      @supports (gap: 0.5rem) {
+        gap: 0.5rem;
+
+        > li {
+          margin: 0;
         }
       }
-    }
-    .card-text {
-      font-family: $font-family-serif;
-      font-size: $card-p-size;
-      line-height: $card-p-l-h;
-      color: $card-p-color;
-    }
-    .card-signature {
-      font-style: italic;
-      font-family: $font-family-serif;
-      color: $card-p-color;
-      font-weight: 700;
-      font-size: $card-signature-size;
+
+      padding: 0;
+      margin-top: 0.5rem;
       margin-bottom: 0;
-      display: block;
+      list-style-type: none;
+      line-height: 1.5;
     }
-    .category-top {
-      font-size: $card-category-size;
-      text-transform: uppercase;
-      color: $card-p-color;
-      margin-bottom: $card-category-m-bottom;
-      a.category {
-        color: $primary;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      .category {
-        font-weight: 600;
-        letter-spacing: $card-category-l-spacing;
-      }
-      .data {
-        &:before {
-          content: '—';
-          display: inline-block;
-          margin: 0 $v-gap;
-        }
-      }
+
+    .chip {
+      margin: 0;
+      line-height: 1.5; // reset default chip l-h
     }
-  }
-  // line
-  &:after {
-    content: '';
-    // height: $card-small-line-height;
-    // width: $card-small-line-w;
-    // background: $card-small-line-color;
-    display: block;
-    margin-top: $card-small-line-margin;
-    margin-left: $card-padding;
-  }
-  a.read-more {
-    position: absolute;
-    bottom: $v-gap * 3;
-  }
-  .categoryicon-top {
-    margin-bottom: $card-cat-icon-block-margin;
-    display: flex;
-    align-items: center;
-    .text {
-      font-size: $card-category-size;
-      text-transform: uppercase;
-      letter-spacing: $card-category-l-spacing;
-      color: $card-p-color;
-      line-height: 1rem;
+
+    a.chip {
+      color: var(--#{$prefix}it-card-chips-a-color);
+      text-decoration: none;
     }
-    .icon {
-      width: $card-cat-icon-size;
-      height: $card-cat-icon-size;
-      fill: $card-link-color;
-      margin-right: $v-gap * 1;
-      flex-shrink: 0;
+
+    // Card date, use <time> if possible
+    .it-card-date {
+      color: var(--#{$prefix}it-card-date-color);
+      font-size: var(--#{$prefix}it-card-date-size);
     }
   }
-  // simple link
-  .simple-link {
-    font-weight: 600;
-    font-size: $card-signature-size;
-    margin-top: $card-simple-link-margin;
-    display: block;
-  }
-  // cards with background
-  &.card-bg {
-    margin-left: math.div($card-padding, 3);
-    margin-right: math.div($card-padding, 3);
-    box-shadow: $card-shadow;
-    background: $card-shadow-bg;
-    &:after {
-      background: transparent;
-    }
-    border-right: none;
-  }
-  // cards with img top
-  &.card-img {
-    // Why the margin?
-    // margin-left: $card-padding/3;
-    // margin-right: $card-padding/3;
-
-    &.shadow .card-body,
-    &.border .card-body,
-    &.border-start .card-body,
-    &.border-end .card-body {
-      padding-left: $card-padding;
-      padding-right: $card-padding;
-    }
-    h5.card-title {
-      font-size: $card-img-heading-size;
-      line-height: $card-img-heading-l-h;
-      margin-bottom: $v-gap * 5;
-    }
-    border-right: none;
-
-    .img-responsive-wrapper {
-      .img-responsive {
-        padding-bottom: 61.29%; /* image proportion 310 x 190 */
-        &.img-responsive-panoramic {
-          padding-bottom: 30.645%; /* image proportion 310 x 95 */
-        }
-      }
+
+  // Card can contain description lists, example: personal or place data
+  .it-card-description-list,
+  .it-card-body .it-card-description-list {
+    border-top: var(--#{$prefix}it-card-border-separator-width) solid var(--#{$prefix}it-card-border-color);
+    border-bottom: var(--#{$prefix}it-card-border-separator-width) solid var(--#{$prefix}it-card-border-color);
+
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: var(--#{$prefix}it-card-description-color);
+
+    padding-top: var(--#{$prefix}it-card-double-spacer-y);
+    padding-bottom: var(--#{$prefix}it-card-double-spacer-y);
+
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: var(--#{$prefix}it-card-spacer-y);
+      border-bottom: none;
     }
 
-    &.rounded .img-responsive-wrapper {
-      border-top-left-radius: $border-radius;
-      border-top-right-radius: $border-radius;
+    display: flex;
+    flex-direction: column;
+
+    // gap fallback
+    > * {
+      margin: 0.25rem;
     }
-  }
-  .card-calendar {
-    height: 80%;
-    max-height: 80px;
-    width: 80px;
-    border-radius: 4px;
-    background-color: $white;
-    box-shadow:
-      0 1px 4px 0 rgba(0, 0, 0, 0.1),
-      0 4px 8px 0 rgba(0, 0, 0, 0.1);
-    position: absolute;
-    right: 32px;
-    top: 10%;
-    color: #455a64;
-    text-align: center;
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.3;
-    text-transform: capitalize;
-    .card-date {
-      font-size: 1.667em;
-      font-weight: 700;
-      display: block;
+
+    @supports (gap: 0.5rem) {
+      gap: 0.5rem;
+
+      > * {
+        margin: 0;
+      }
     }
-  }
 
-  &.no-after {
-    content: none;
-    position: relative;
-    &:after {
-      display: none;
+    dt {
+      display: inline;
+      font-weight: bold;
+      margin-right: 0.125rem;
     }
 
-    & > .read-more {
-      &::before {
-        content: '';
-        height: $v-gap * 3;
-        display: block;
-      }
-      padding-top: $v-gap * 2;
+    dd {
+      display: inline-block;
+      margin: 0;
     }
-  }
 
-  // special card
-  &.special-card {
-    .img-responsive-wrapper {
-      overflow: visible;
-      position: relative;
-      width: $special-card-img-width;
-      margin-bottom: $card-padding;
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-      &:before {
-        background: $primary-a3;
-        left: $card-padding;
-        top: $card-padding;
-        opacity: 0.3;
-        transition: all 0.3s;
-      }
-      &:after {
-        background: $primary-a3;
-        left: $card-padding * 0.5;
-        top: $card-padding * 0.5;
-        transition: all 0.3s;
-      }
-      .img-responsive {
-        padding-bottom: 122.98%; /* image proportion 214 x 174 */
-        z-index: 1;
-      }
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
     }
-    .head-tags {
-      margin-bottom: $card-padding;
-      span.data {
-        font-weight: normal;
-      }
+  }
+
+  // Card can contain special lists, example: Related articles to a main Tag card
+  > .list-group,
+  .it-card-body > .list-group {
+    border-top: var(--#{$prefix}it-card-border-separator-width) solid var(--#{$prefix}it-card-border-color);
+    border-bottom: var(--#{$prefix}it-card-border-separator-width) solid var(--#{$prefix}it-card-border-color);
+
+    margin-top: var(--#{$prefix}it-card-double-spacer-y);
+    margin-bottom: var(--#{$prefix}it-card-double-spacer-y);
+
+    color: var(--#{$prefix}it-card-p-color);
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius(var(--#{$prefix}it-card-inner-border-radius));
     }
-    h5.card-title {
-      color: $card-link-color;
+
+    &:last-child {
+      border-bottom-width: 0;
+      @include border-bottom-radius(var(--#{$prefix}it-card-inner-border-radius));
     }
-    &:hover {
-      text-decoration: underline;
-      h5.card-title {
-        color: var(--bs-link-hover-color);
-      }
-      .img-responsive-wrapper {
-        &:before {
-          background: $primary;
-          opacity: 0.3;
-        }
-        &:after {
-          background: $primary;
-        }
-      }
+  }
+
+  .it-card-body > .list-group {
+    margin-top: var(--#{$prefix}it-card-quad-spacer-y);
+    margin-bottom: var(--#{$prefix}it-card-double-spacer-y);
+
+    .list-group-item {
+      padding: var(--#{$prefix}it-card-list-group-item-padding-y) 0;
     }
   }
-  // card big
-  &.card-big {
-    .card-body {
-      padding: $card-padding * 2;
-      .top-icon {
-        margin-bottom: $card-padding;
-        .icon {
-          width: $card-big-top-icon-size;
-          height: $card-big-top-icon-size;
-          fill: $primary;
+
+  > .it-card-header + .list-group,
+  > .list-group + .it-card-footer {
+    border-top: 0;
+  }
+
+  // Card image responsive wrapper and a11y DOM order hack
+  &.it-card-image {
+    width: 100%;
+    @include border-top-radius(var(--#{$prefix}it-card-inner-border-radius));
+    @include border-bottom-radius(var(--#{$prefix}it-card-inner-border-radius));
+
+    .it-card-image-wrapper {
+      order: -1;
+    }
+
+    &.rounded {
+      .it-card-image-wrapper {
+        &:first-child,
+        &:nth-child(2) {
+          border-top-left-radius: var(--#{$prefix}it-card-inner-border-radius);
+          border-top-right-radius: var(--#{$prefix}it-card-inner-border-radius);
         }
       }
 
-      h5.card-title {
-        font-size: $card-big-h5-size;
-        line-height: $card-big-h5-l-h;
-      }
-      .card-text {
-        font-size: $card-big-p-size;
-        line-height: $card-big-p-l-h;
+      &.it-card-border-top {
+        .it-card-image-wrapper {
+          &:first-child,
+          &:nth-child(2) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
       }
     }
-    .flag-icon {
-      margin-left: $card-padding * 2;
-    }
-    .etichetta {
-      position: absolute;
-      right: $card-padding * 2;
-      top: $card-padding + $v-gap;
-      //left: $card-padding * 6;
-      justify-content: flex-end;
-    }
   }
-  &.border-bottom-card {
-    &::before {
+
+  // Card special colored 4px border-top, mere aestethic, don't use for semantic meaning
+  &.it-card-border-top {
+    &::after {
       content: '';
       display: block;
       position: absolute;
       left: 0;
       right: 0;
-      height: 4px;
-      bottom: 0;
-      background: $primary;
+      height: var(--#{$prefix}it-card-border-top-width);
+      top: 0;
+      background: var(--#{$prefix}it-card-border-top-color);
     }
-  }
-  //head tag
-  .head-tags {
-    justify-content: space-between;
-    display: flex;
-    margin-bottom: $card-padding * 2;
-    .data {
-      font-size: $card-category-size;
-      text-transform: uppercase;
-      color: $card-p-color;
+
+    &.rounded {
+      &::after {
+        border-radius: 3px 3px 0 0;
+      }
     }
-  }
-  .card-tag {
-    color: $primary;
-    font-size: $card-category-size;
-    font-weight: bold;
-    letter-spacing: $card-category-l-spacing;
-    padding: 0 $v-gap * 4;
-    border-radius: $tag-radius;
-    border: 1px solid $primary;
-  }
-  // card footer
-  .it-card-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: $card-padding * 2;
-    .card-signature {
-      font-style: italic;
-      font-family: $font-family-serif;
-      color: $card-p-color;
-      font-weight: 700;
-      font-size: $card-signature-size;
-      display: block;
-      margin-bottom: 0;
+
+    // Border Top Color
+    &.it-card-border-top-primary::after {
+      --#{$prefix}it-card-border-top-color: #{$primary};
+    }
+
+    &.it-card-border-top-secondary::after {
+      --#{$prefix}it-card-border-top-color: #{$secondary};
+    }
+
+    &.it-card-border-top-success::after {
+      --#{$prefix}it-card-border-top-color: #{$success};
+    }
+
+    &.it-card-border-top-warning::after {
+      --#{$prefix}it-card-border-top-color: #{$warning};
+    }
+
+    &.it-card-border-top-danger::after {
+      --#{$prefix}it-card-border-top-color: #{$danger};
     }
   }
 
-  &.card-teaser {
-    display: inline-flex;
-    // width: auto;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 24px;
+  // Card presentation
+  &.it-card-banner {
+    align-items: center;
+    text-align: center;
+    padding-top: calc(var(--#{$prefix}it-card-quad-spacer-y) + var(--#{$prefix}it-card-spacer-y));
+    padding-bottom: calc(var(--#{$prefix}it-card-double-spacer-y) + var(--#{$prefix}it-card-spacer-y));
 
-    &:after {
-      content: none;
+    @include media-breakpoint-down(sm) {
+      padding-top: calc(var(--#{$prefix}it-card-double-spacer-y) + var(--#{$prefix}it-card-spacer-y));
+      padding-bottom: var(--#{$prefix}it-card-spacer-y);
     }
 
-    &.card-column {
-      flex-direction: column;
+    .it-card-body .it-card-subtitle {
+      font-weight: 500 !important;
     }
 
-    .card-header {
+    .it-card-banner-icon-wrapper {
+      order: -1;
+      width: 100%;
       display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: flex-start;
+      flex-direction: column;
+      align-items: center;
+    }
 
-      padding: 1em;
-      width: 100%;
+    .it-card-footer {
+      border-top: 0;
+      padding-top: var(--#{$prefix}it-card-spacer-y);
+    }
+  }
+
+  // Layout inline
+  &.it-card-inline {
+    @mixin it-card-inline-layout {
+      flex-direction: row !important;
 
-      .icon {
-        margin-right: 0.5rem;
+      &:not(.it-card-banner) {
+        padding-bottom: 0 !important;
       }
 
-      @for $i from 1 through 6 {
-        h#{$i} {
-          line-height: 1.5;
+      .it-card-inline-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-grow: 1;
+
+        .it-card-footer {
+          margin-bottom: calc(var(--#{$prefix}it-card-cap-padding-y) * 0.5);
+        }
+
+        .it-card-related.it-card-footer {
           margin-bottom: 0;
+          padding-bottom: var(--#{$prefix}it-card-cap-padding-y);
         }
       }
-    }
 
-    .card-body {
-      padding: 0;
-      flex: auto;
+      &.it-card-image {
+        .it-card-image-wrapper {
+          display: flex;
 
-      .card-text,
-      .card-text > p {
-        margin: 0;
+          .ratio {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+          }
 
-        & + .card-text {
-          margin-top: 16px;
+          position: relative;
+          overflow: hidden;
         }
-      }
-    }
 
-    .icon {
-      min-width: 32px;
+        &.it-card-inline-reverse {
+          order: inherit;
 
-      & + .card-body {
-        margin-left: 1em;
-      }
-    }
+          .it-card-image-wrapper {
+            order: 1;
+          }
+        }
 
-    .avatar {
-      &.size-xs {
-        min-width: $avatar-base-size * 2;
-      }
+        &.rounded {
+          .it-card-image-wrapper {
+            &:first-child,
+            &:nth-child(2) {
+              border-top-right-radius: 0 !important;
+              border-bottom-left-radius: var(--#{$prefix}it-card-inner-border-radius);
+            }
+          }
 
-      &.size-sm {
-        min-width: $avatar-base-size * 3;
+          &.it-card-inline-reverse {
+            .it-card-image-wrapper {
+              &:first-child,
+              &:nth-child(2) {
+                border-top-left-radius: 0 !important;
+                border-bottom-left-radius: 0 !important;
+                border-top-right-radius: var(--#{$prefix}it-card-inner-border-radius) !important;
+                border-bottom-right-radius: var(--#{$prefix}it-card-inner-border-radius) !important;
+              }
+            }
+          }
+        }
       }
 
-      &.size-md {
-        min-width: $avatar-base-size * 4;
-      }
+      &.it-card-banner {
+        align-items: flex-start;
+        text-align: left;
+        min-height: auto !important;
+        padding-left: var(--bs-it-card-spacer-x);
+        padding-right: var(--bs-it-card-spacer-x);
+
+        .it-card-title {
+          margin-top: 0;
+        }
 
-      &.size-lg {
-        min-width: $avatar-base-size * 5;
+        .it-card-banner-icon-wrapper {
+          width: auto;
+        }
+
+        &.it-card-inline-reverse {
+          order: inherit;
+          padding-right: var(--bs-it-card-spacer-x);
+          padding-left: 0;
+
+          .it-card-banner-icon-wrapper {
+            order: 1;
+          }
+        }
       }
+    }
 
-      &.size-xl {
-        min-width: $avatar-base-size * 10;
+    &.it-card-inline-mini {
+      @include it-card-inline-layout;
+      min-height: var(--#{$prefix}it-card-inline-mini-min-height);
+
+      &.it-card-image .it-card-image-wrapper {
+        width: 25%;
       }
 
-      & + .card-body {
-        flex: 1;
+      &.it-card-image .it-card-inline-content {
+        width: 75%;
       }
     }
-  }
 
-  @each $color, $value in $theme-colors {
-    &.card-teaser-#{$color} {
-      border-left: 8px solid $value;
-    }
-  }
-}
-// flag
-.flag-icon {
-  width: $flag-icon-w;
-  height: $flag-icon-h;
-  box-sizing: content-box;
-  position: relative;
-  background: $flag-icon-color;
-  color: $card-shadow-bg;
-  text-align: center;
-  text-transform: uppercase;
-}
-.flag-icon:after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0;
-  height: 0;
-  border-bottom: 13px solid $card-shadow-bg;
-  border-left: $flag-icon-w * 0.5 solid transparent;
-  border-right: $flag-icon-w * 0.5 solid transparent;
-}
+    @include media-breakpoint-up(sm) {
+      &:not(.it-card-inline-mini) {
+        @include it-card-inline-layout;
+        min-height: var(--#{$prefix}it-card-inline-min-height);
 
-// read more text
-a.read-more {
-  display: flex;
-  align-items: center;
-  color: $card-link-color;
-  text-transform: uppercase;
-  font-weight: bold;
-  letter-spacing: $card-category-l-spacing;
-  font-size: $card-category-size;
-  text-decoration: none;
-  .icon {
-    margin-left: $v-gap;
-    fill: $card-link-color;
-    width: $card-link-icon-size;
-    height: $card-link-icon-size;
-    flex-shrink: 0;
-  }
-  &:hover {
-    text-decoration: underline;
-  }
-}
-//.etichetta
-.etichetta {
-  display: flex;
-  align-items: center;
-  font-size: $card-category-size;
-  text-transform: uppercase;
-  font-weight: bold;
-  letter-spacing: $card-category-l-spacing;
-  color: $card-p-color;
-  .icon {
-    fill: $card-p-color;
-    width: $v-gap * 3;
-    height: $v-gap * 3;
-    margin-right: $v-gap;
-    flex-shrink: 0;
-  }
-}
-// Contextual variation
-.row {
-  [class*='col-'] {
-    //car variation inside cols
-    > .card-wrapper {
-      height: 100%;
-      > .card {
-        height: 100%;
+        &.it-card-image .it-card-image-wrapper {
+          width: 50%;
+        }
+
+        &.it-card-image .it-card-inline-content {
+          width: 50%;
+        }
       }
     }
   }
 }
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .card-wrapper {
-    padding-bottom: 0;
-    &.card-space {
-      padding-bottom: $card-padding * 0.5;
-    }
-    &.card-offset {
-      margin-top: 90px;
-    }
-  }
-  .card {
-    border: none;
-    &.card-bg,
-    &.card-img {
-      margin: 0;
-    }
-  }
-}