@ilo-org/styles 0.0.1

package/scss/components/_card.scss

@@ -0,0 +1,667 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+  margin: 16px 0;
+
+  &--action:hover,
+  &--action:focus {
+    background: $brand-ilo-white;
+    color: $brand-ilo-blue;
+    text-decoration: none;
+
+    #{$self}--dark {
+      background: $brand-ilo-white;
+    }
+
+    #{$self}--eyebrow {
+      color: $brand-ilo-blue;
+    }
+
+    #{$self}--title {
+      color: $brand-ilo-blue;
+    }
+
+    #{$self}--intro {
+      color: $brand-ilo-blue;
+    }
+
+    #{$self}--date {
+      color: $brand-ilo-blue;
+    }
+
+    #{$self}--eventdate {
+      color: $brand-ilo-blue;
+    }
+  }
+
+  &--link {
+    background: none;
+    color: transparent;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    text-decoration: none;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
+
+  &--light {
+    background: $brand-ilo-white;
+  }
+
+  &--dark {
+    background: $brand-ilo-dark-blue;
+
+    #{$self}--eyebrow {
+      color: $brand-ilo-grey-light;
+    }
+
+    #{$self}--title {
+      color: $brand-ilo-white;
+    }
+
+    #{$self}--intro {
+      color: $brand-ilo-grey-light;
+    }
+
+    #{$self}--date {
+      color: $brand-ilo-grey-light;
+    }
+
+    #{$self}--eventdate {
+      color: $brand-ilo-grey-light;
+    }
+  }
+
+  &--cornercut {
+    margin-top: 40px;
+    padding-top: 0 !important;
+    position: relative;
+
+    @include breakpoint("medium") {
+      margin-top: 48px;
+    }
+
+    @include breakpoint("large") {
+      margin-top: 64px;
+    }
+
+    &::before {
+      background: inherit;
+      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+      content: "";
+      display: block;
+      height: 40px;
+      left: 0;
+      position: absolute;
+      top: -39.7px;
+      width: 100%;
+
+      @include breakpoint("medium") {
+        height: 48px;
+        top: -47.7px;
+      }
+
+      @include breakpoint("large") {
+        height: 64px;
+        top: -63.7px;
+      }
+    }
+  }
+
+  &--eyebrow {
+    color: $brand-ilo-purple;
+    @include font-styles("body-small");
+    @include textmargin(
+      "margin-bottom",
+      16px,
+      "headline-5",
+      "display",
+      "body-small",
+      "copy"
+    );
+
+    #{$self}--link:hover &,
+    #{$self}--link:focus & {
+      color: $brand-ilo-blue;
+    }
+  }
+
+  &--title {
+    color: $brand-ilo-dark-blue;
+    font-family: $fonts-display;
+    font-weight: 700;
+    @include font-styles("headline-5");
+    @include textmargin(
+      "margin-bottom",
+      10px,
+      "headline-5",
+      "display",
+      "body-small",
+      "copy"
+    );
+
+    #{$self}--link:hover &,
+    #{$self}--link:focus & {
+      color: $brand-ilo-blue;
+    }
+  }
+
+  &--intro {
+    color: $brand-ilo-grey-charcoal;
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+
+    #{$self}--link:hover &,
+    #{$self}--link:focus & {
+      color: $brand-ilo-blue;
+    }
+  }
+
+  &--date {
+    color: $brand-ilo-grey-accessible;
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+
+    #{$self}--link:hover &,
+    #{$self}--link:focus & {
+      color: $brand-ilo-blue;
+    }
+  }
+
+  &--event-date {
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+  }
+
+  &--image {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  &--cta {
+    position: relative;
+    z-index: 2;
+  }
+
+  // CARD VARIANTS
+  &--multilink {
+    padding: 24px;
+
+    @include breakpoint("medium") {
+      padding: 40px;
+    }
+
+    @include breakpoint("large") {
+      padding: 56px 48px;
+    }
+  }
+
+  &--detail {
+    border-bottom: 3px solid $brand-ilo-grey-accessible;
+    margin: 32px 0;
+
+    &::before {
+      display: none;
+    }
+
+    &:hover,
+    &:focus {
+      picture::before {
+        opacity: 0.4;
+        z-index: 2;
+      }
+
+      #{$self}--event-date {
+        &::before {
+          @include dataurlicon("equilateraltriangle", $brand-ilo-blue);
+        }
+      }
+    }
+
+    picture {
+      display: flex;
+      position: relative;
+
+      &::before {
+        background-color: $brand-ilo-blue;
+        content: "";
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        transition: opacity 0.15s ease-in-out;
+        width: 100%;
+        z-index: -1;
+      }
+    }
+
+    #{$self}--wrap {
+      display: flex;
+    }
+
+    #{$self}--image {
+      object-fit: contain;
+      width: 77px;
+
+      @include breakpoint("large") {
+        width: 200px;
+      }
+
+      &--wrapper {
+        max-width: 77px;
+        width: 100%;
+
+        @include breakpoint("large") {
+          max-width: 200px;
+        }
+      }
+    }
+
+    #{$self}--content {
+      padding: 16px 24px 40px;
+
+      @include breakpoint("large") {
+        padding: 24px 24px 64px;
+      }
+    }
+
+    #{$self}--title {
+      @include font-styles("headline-6");
+
+      @include breakpoint("large") {
+        @include font-styles("headline-5");
+      }
+    }
+
+    #{$self}--event-date {
+      @include font-styles("body-small");
+      margin-bottom: 0;
+      padding-left: 24px;
+      position: relative;
+
+      &::before {
+        background-repeat: no-repeat;
+        content: "";
+        display: inline-block;
+        height: px-to-rem(14px);
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: rotate(-90deg) translateX(50%);
+        width: px-to-rem(12px);
+        @include dataurlicon("equilateraltriangle", $brand-ilo-grey-charcoal);
+      }
+    }
+
+    #{$self}--date {
+      @include font-styles("body-small");
+    }
+
+    // #{}
+    // title shrinks on mobile
+    // color border on cards
+    // padding around cards
+  }
+
+  &--graphic {
+    border-bottom: 3px solid $brand-ilo-grey-ui;
+    margin-top: 40px;
+    padding: 0 24px 40px;
+    position: relative;
+
+    &::before {
+      background: inherit;
+      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+      content: "";
+      display: block;
+      height: 40px;
+      left: 0;
+      position: absolute;
+      top: -39.7px;
+      width: 100%;
+    }
+
+    @include breakpoint("medium") {
+      padding: 0 32px 40px;
+    }
+
+    &#{$self}--dark {
+      border-bottom: 3px solid $brand-ilo-purple;
+    }
+
+    #{$self}--eyebrow {
+      @include textmargin(
+        "margin-bottom",
+        24px,
+        "base",
+        "copy",
+        "headline-5",
+        "display"
+      );
+    }
+
+    #{$self}--title {
+      @include font-styles("headline-6");
+      @include textmargin(
+        "margin-bottom",
+        40px,
+        "headline-6",
+        "display",
+        "base",
+        "copy"
+      );
+
+      @include breakpoint("medium") {
+        @include font-styles("headline-5");
+        @include textmargin(
+          "margin-bottom",
+          40px,
+          "headline-5",
+          "display",
+          "base",
+          "copy"
+        );
+      }
+    }
+
+    #{$self}--date {
+      @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
+    }
+  }
+
+  &--graphicpromo {
+    max-width: 920px;
+    padding: 40px 24px;
+    width: 100%;
+
+    @include breakpoint("medium") {
+      padding: 48px;
+    }
+
+    @include breakpoint("large") {
+      padding: 64px 72px;
+    }
+
+    &#{$self}--light:not(:hover) #{$self}--title {
+      color: $brand-ilo-grey-charcoal;
+    }
+
+    #{$self}--title {
+      @include font-styles("headline-4");
+      @include textmargin(
+        "margin-bottom",
+        24px,
+        "headline-4",
+        "display",
+        "body-small",
+        "copy"
+      );
+
+      @include breakpoint("medium") {
+        @include font-styles("headline-3");
+        @include textmargin(
+          "margin-bottom",
+          32px,
+          "headline-3",
+          "display",
+          "base",
+          "copy"
+        );
+      }
+    }
+
+    #{$self}--intro {
+      @include font-styles("body-small");
+      @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+
+      @include breakpoint("medium") {
+        @include font-styles("base");
+        @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
+      }
+    }
+  }
+
+  &--factlist {
+    padding: 0 24px 48px 24px;
+    max-width: 856px;
+
+    &::before {
+      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+      height: 40px;
+      top: -39.7px;
+    }
+
+    @include breakpoint("large") {
+      padding: 0 40px 56px 40px;
+
+      &::before {
+        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+        height: 48px;
+        top: -47.7px;
+      }
+    }
+
+    #{$self}--title {
+      color: $brand-ilo-grey-charcoal;
+      @include font-styles("headline-5");
+      @include textmargin(
+        "margin-bottom",
+        32px,
+        "headline-5",
+        "display",
+        "body-small",
+        "copy"
+      );
+
+      @include breakpoint("large") {
+        @include font-styles("headline-4");
+        @include textmargin(
+          "margin-bottom",
+          40px,
+          "headline-4",
+          "display",
+          "base",
+          "copy"
+        );
+      }
+    }
+  }
+
+  &--stat {
+    border-bottom: 3px solid $brand-ilo-purple;
+    padding: 0 24px 24px 30px;
+    width: 100%;
+
+    &::before {
+      clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+      height: 40px;
+      top: -39.7px;
+    }
+
+    &#{$self}--blue {
+      background: $brand-ilo-light-blue;
+    }
+
+    &#{$self}--yellow {
+      background: $brand-ilo-yellow;
+    }
+
+    &#{$self}--green {
+      background: $brand-ilo-green;
+    }
+
+    &#{$self}--turquoise {
+      background: $brand-ilo-turquoise;
+    }
+
+    #{$self}--content {
+      display: flex;
+      flex-wrap: wrap;
+      height: 100%;
+    }
+
+    #{$self}--title {
+      color: $brand-ilo-dark-blue;
+      @include font-styles("headline-3");
+      @include textmargin("margin-bottom", 24px, "headline-3", "display", 0, 0);
+      width: 100%;
+    }
+
+    #{$self}--intro {
+      color: $brand-ilo-dark-blue;
+      @include font-styles("nav-md-sm");
+      @include textmargin("margin-bottom", 40px, "nav-md-sm", "copy", 0, 0);
+      width: 100%;
+    }
+
+    .ilo--link {
+      @include font-styles("image-credit");
+      align-self: flex-end;
+    }
+  }
+
+  &--data {
+    background: $brand-ilo-light-blue;
+    border-bottom: 3px solid #82afdc;
+    max-width: 600px;
+    padding: 0 24px 56px;
+
+    &::before {
+      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+      height: 40px;
+      top: -39.7px;
+    }
+
+    @include breakpoint("large") {
+      &::before {
+        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+        height: 48px;
+        top: -47.7px;
+      }
+    }
+
+    #{$self}--image--wrapper {
+      width: max(205px, 50%);
+    }
+
+    &--content-label {
+      @include font-styles("body-xs");
+      @include textmargin(
+        "margin-bottom",
+        16px,
+        "body-xs",
+        "copy",
+        "headline-5",
+        "display"
+      );
+      color: $brand-ilo-grey-accessible;
+    }
+
+    &--content-copy {
+      @include font-styles("headline-5");
+      @include textmargin(
+        "margin-bottom",
+        40px,
+        "headline-5",
+        "display",
+        "body-xs",
+        "copy"
+      );
+      color: $brand-ilo-grey-charcoal;
+      font-family: $fonts-display;
+      font-weight: 500;
+    }
+
+    &--content-files {
+      margin-bottom: 40px;
+    }
+
+    .ilo--link {
+      @include font-styles("headline-6");
+    }
+
+    &--file {
+      margin: 4px 8px 4px 0;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--feature {
+    margin-top: 0;
+
+    &::before {
+      display: none;
+    }
+
+    &:hover,
+    &:focus {
+      picture::before {
+        opacity: 0.4;
+        z-index: 1;
+      }
+    }
+
+    picture {
+      display: flex;
+      position: relative;
+
+      &::before {
+        background-color: $brand-ilo-blue;
+        content: "";
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        transition: opacity 0.15s ease-in-out;
+        width: 100%;
+        z-index: -1;
+      }
+    }
+
+    #{$self}--content {
+      padding: 24px 24px 40px;
+    }
+
+    #{$self}--title {
+      @include font-styles("headline-5");
+      @include textmargin(
+        "margin-bottom",
+        40px,
+        "headline-5",
+        "display",
+        "body-eyebrow",
+        "copy"
+      );
+      font-family: $fonts-display;
+      font-weight: 700;
+    }
+
+    #{$self}--eyebrow {
+      @include font-styles("body-eyebrow");
+      @include textmargin(
+        "margin-bottom",
+        10px,
+        "body-eyebrow",
+        "copy",
+        "headline-5",
+        "display"
+      );
+    }
+
+    #{$self}--date {
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/components/_cardgroup.scss

@@ -0,0 +1,45 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--cardgroup {
+  $card: ".ilo--card";
+  background: #e5e5e5;
+  padding: 112px 40px;
+
+  &--inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: auto;
+    max-width: 1189px;
+
+    #{$card} {
+      width: 100%;
+    }
+  }
+
+  &--two {
+    @include breakpoint("large") {
+      #{$card} {
+        width: calc(50% - 16px);
+      }
+    }
+  }
+
+  &--three {
+    @include breakpoint("large") {
+      #{$card} {
+        width: calc(33.333% - 16px);
+      }
+    }
+  }
+
+  &--four {
+    @include breakpoint("large") {
+      #{$card} {
+        width: calc(25% - 16px);
+      }
+    }
+  }
+}