marc-leopold/components/NoContent.vue

<template>
  <article class="is-mounted no-content-page no-content-bg">
    <h1 class="no-content-heading page-title">{{ heading }}</h1>
    <p class="no-content-text">{{ message }}</p>
  </article>
</template>

<script>
export default {
  name: 'NoContent',

  props: {
    heading: {
      type: String,
      required: true,
    },
    message: {
      type: String,
      required: false,
      default () {
        return 'This page blah blah ...'
      },
    }
  }
}
</script>

<style scoped lang="scss">
.no-content-page {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
  padding: $site-menu__header-height * 2 1rem 0;

  @media (min-width: $bp__layout) {
    padding: 0 0 0 $site-menu__header-width;
    justify-content: center;
  }
}

.no-content-bg {
  $color-inner: $color__primary-500;
  $color-outer: $color__primary-100;
  $transparency-outer: .1;
  $transparency-inner: .05;

  background-color: rgba($color-inner, .1);
  background: linear-gradient(
    to bottom,
    rgba($color-inner, $transparency-inner),
    rgba($color-outer, $transparency-outer)
  );

  @media (min-width: $bp__layout) {
    background:
      linear-gradient(
        to bottom,
        rgba($color-outer, $transparency-outer),
        rgba($color-inner, $transparency-inner),
        rgba($color-outer, $transparency-outer)
      ),
      linear-gradient(
        to right,
        rgba($color-outer, $transparency-outer),
        rgba($color-inner, $transparency-inner),
        rgba($color-outer, $transparency-outer)
      );
  }
}

.no-content-heading {
  margin-bottom: .25em;
}
</style>