CSS Code Examples

Tailwind CSS

You can use Tailwind CSS (opens new window) as a PostCSS (opens new window) plugin for rapid development.

You gain access to CSS utility classes and custom methods to use in your CSS.

Panel Component

.c-panel {
  @apply relative flex flex-col;
  @apply border-8 border-gray-500;
}

.c-panel__header {
  @apply relative;

  &:after {
    @apply block;

    content: '';
    padding-bottom: 53%;
  }
}

.c-panel__bg {
  @apply absolute top-0 right-0 bottom-0 left-0;
  @apply bg-cover bg-center;
  @apply opacity-0;
  @apply z-0 transition-slow;

  &.js-is-active {
    @apply opacity-100;
    @apply z-10;
  }
}

.c-panel__body {
  @apply flex-auto flex flex-col justify-between;
  @apply py-6 px-8;
}

SCSS

Badge Component

$badge-padding-y: sp(xs);
$badge-padding-x: sp(2xs);
$badge-font-size: rem(12);

.c-badge {
  display: inline-block;
  font: {
    family: f(heebo);
    size: $badge-font-size;
  }
  padding: $badge-padding-y $badge-padding-x;
  position: relative;
  text-transform: uppercase;
  letter-spacing: rem(2);
  @include line-height(1.3, 1.5);
}

.c-badge.is-primary {
  background-color: c(blue);
  color: c(white);
}

Breadcrumbs Component

.c-breadcrumbs {
  position: relative;
}

.c-breadcrumbs ul {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.c-breadcrumbs li {
  align-items: center;
  display: flex;
  font: {
    family: f(heebo);
    size: rem(12);
  }
  letter-spacing: 0.1em;
  text-transform: uppercase;

  &:not(:last-child) {
    &:after {
      color: currentColor;
      content: '\002F';
      display: inline-block;
      padding: {
        left: sp(xs);
        right: sp(xs);
      }
    }
  }
}

.c-breadcrumbs a {
  border-bottom: solid transparent 1px;

  @include media-hover {
    border-bottom-color: currentColor;
  }
}

Input Type Search Component

$search-padding-y: sp(2sm);
$search-padding-x: 0;
$search-border-width: 1px;

.c-search {
  border: {
    color: transparent;
    style: solid;
    width: $search-border-width;
  }
  border-bottom-color: currentColor;
  align-items: center;
  display: flex;
  padding: $search-padding-y $search-padding-x;
}

.c-search__input {
  background: none;
  color: currentColor;
  flex: 1;

  @include placeholder(true) {
    color: currentColor;
  }
}

.c-search.is-default {
  .c-search__input {
    font: {
      family: f(poppins);
      weight: weight(light);
    }

    @include scale(font-size, 18px, 22px);
  }
}

.c-search.is-main {
  padding: {
    left: $search-padding-y;
    right: $search-padding-y;
  }

  .c-search__input {
    font: {
      family: f(heebo);
      size: rem(12);
    }
    letter-spacing: em(1, 12);
    text-transform: uppercase;
  }
}