A simple BEM refactor of layout component

ContentBlock-After.scss

.ContentBlock {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  // Modifiers
  &--withBottomMargin {
    margin-bottom: 2rem;
  }

  // Children elements
  &-header {
    background: $color-primary;
    border-radius: 3px 3px 0 0;
    padding: 1rem 1.5rem;
  }

  &-body {
    background-color: $white;
    border-radius: 0 0 3px 3px;
  }
}

// ContentBlock header variations
.ContentBlock-header--withBorder {
  border-bottom: 6px solid $orange;
}

// ContentBlock Body variations
.ContentBlock-body--padded {
  padding: 1.5rem;

  @include grid-media($tablet-grid) {
    padding: 3rem;
  }
}

ContentBlock.scss

.ContentBlock {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  &-body,
  &-content {
    border-radius: 0 0 3px 3px;
  }

  &-surveyLink {
    display: block;
    margin: 1rem 0 0;
    text-align: center;
    text-decoration: underline;
  }

  &-headline {
    color: $color-secondary;
    font-family: $base-font-family;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  &.padding {
    .ContentBlock-body {
      background-color: $white;
      padding: 1.5rem;

      @include grid-media($tablet-grid) {
        padding: 3rem;
      }
    }
  }

  &.margin {
    margin-bottom: 2rem;
  }
}

.ContentBlock-header {
  background: $color-primary;
  border-radius: 3px 3px 0 0;
  padding: 1rem 1.5rem;

  .border & {
    border-bottom: 6px solid $orange;
  }

  .ContentBlock-title {
    color: $white;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
  }
}