Selectable Card

By Christine Siu

How do I use This?

A basic card with title, description and select button.

HTML

<div class="card card-select" data-cardSelect>
  <div class="card-divider">
    Abby the Cat
  </div>
  <img src="https://placeimg.com/640/480/animals">
  <div class="card-section">
    <h5>I need a new home!</h5>
    <p>Abby loves long naps in the sun, the laser game, and low-fat milk. She is also a great bug exterminator!</p>
  </div>
  <button class="button" data-cardSelectButton></button>
</div>

.card-select {
  text-align: center;
  transition: all 0.5s ease;

  .card-divider {
    background-color: $white;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid $medium-gray;
  }

  .button {
    padding: 1rem;
    background-color: $medium-gray;

    &:after {
      content: 'Select';
    }

    &:hover {
      background-color: $primary-color;
    }

    &:focus {
      background-color: $primary-color;
    }
  }

  // toggle this class on click
  &.is-selected {
    border: 1px solid $primary-color;
    box-shadow: 0 0 10px $light-gray;
    transition: all 0.5s ease;

    .button {
      background-color: $primary-color;

      &:after {
        content: 'Selected';
      }
    }
  }
}

.card-select {
  text-align: center;
  transition: all 0.5s ease;
}

.card-select .card-divider {
  background-color: #fefefe;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid #cacaca;
}

.card-select .button {
  padding: 1rem;
  background-color: #cacaca;
}

.card-select .button:after {
  content: 'Select';
}

.card-select .button:hover {
  background-color: #1779ba;
}

.card-select .button:focus {
  background-color: #1779ba;
}

.card-select.is-selected {
  border: 1px solid #1779ba;
  box-shadow: 0 0 10px #e6e6e6;
  transition: all 0.5s ease;
}

.card-select.is-selected .button {
  background-color: #1779ba;
}

.card-select.is-selected .button:after {
  content: 'Selected';
}

$('[data-cardSelectButton]').click(function() {
  $(this).parent('[data-cardSelect]').toggleClass('is-selected');
});

Selectable Card

By Christine Siu

Colored Switches

Rounded Social buttons

Hover Add to Cart Button

Selectable Card

By Christine Siu

Similar Building Blocks

Colored Switches

Rounded Social buttons

Hover Add to Cart Button