Activity button

HTML


<a class="button-link" href="#"><div class="button button--activity button--activity--icon-contact button--primary">
    Register someone else…
</div></a>

SCSS

    .button {
  &.button--activity {
    @include bold-font;
    font-size: $small-font-size;
    position: relative;
    display: block;
    padding: 16px;
    height: auto;
    min-height: 136px;
    margin: 0 auto;
    text-align: left;

    &.vertically-centred {
     display: flex !important;
     align-items: center;
     justify-content: center;
    }

    &--icon-contact::after {
      position: absolute;
      bottom: 12px;
      left: 16px;
      width: 20px;
      height: 20px;
      content: '\00a0';
      opacity: 0.6;
      background: transparent url('/images/icon-contact.svg') top left no-repeat;
    }

    &--icon-note::after {
      position: absolute;
      bottom: 12px;
      left: 16px;
      width: 20px;
      height: 20px;
      content: '\00a0';
      opacity: 0.6;
      background: transparent url('/images/icon-note.svg') top left no-repeat;
    }

    &--icon-pencil::after {
      position: absolute;
      bottom: 12px;
      left: 16px;
      width: 20px;
      height: 20px;
      content: '\00a0';
      opacity: 0.6;
      background: transparent url('/images/icon-pencil.svg') top left no-repeat;
    }

    &--icon-smiley::after {
      position: absolute;
      bottom: 12px;
      left: 16px;
      width: 20px;
      height: 20px;
      content: '\00a0';
      opacity: 0.6;
      background: transparent url('/images/icon-smiley.svg') top left no-repeat;
    }
  }
}

Connect Dementia Research

Pattern Library

Activity button

HTML

SCSS