Cards

GEFF has some basic styles for cards similar to that of Google Material cards. Obviously again, this is just a preliminary style and can easily be changed to suit your project. There are variables like $card-background which also allow easy customisation using the variable overrides.

A card in this sense will fill what ever container it is in, so if you create a .full_width grid, or .half div the card will style that size.

.card {
  background-color: $card-background;
  border-radius: $base-border-radius;
  padding: $container-padding/1.5;
  -webkit-box-shadow: 0px 0px 8px 1px rgba($black, 0.05);
  -moz-box-shadow: 0px 0px 8px 1px rgba($black, 0.05);
  box-shadow: 0px 0px 8px 1px rgba($black, 0.05);
  margin-top: 10px;
  position: relative;
  overflow: hidden;

  @include desktop {
    padding: $container-padding;
  }
}

Slightly more niece we have found in a few projects that we want to have a more versatile version of a table - usually a list of cards. To help with this there is the .card_table container class. Use this when wanting to use the cards more as a list of items and have less padding between them. The .card_th also allows for a header row that are styled bold similar to that of a table header.

.card_table {
  .card {
    @include desktop {
      padding: $container-padding/2;
    }
  }
  .card_th {
    font-weight: bold;
    padding: $container-padding/2;
    padding-bottom: 0;
  }
}