juggl/src/components/layout/LayoutMinimal.vue

<template>
  <main>
    <BaseLogo id="logo" size="medium" center class="space-top" />
    <BaseContainer
      :width="width"
      center
      class="space-bottom"
      :class="{ 'center-content': center }"
    >
      <BaseTitle v-if="title" center size="huge" class="centered pt-5 pb-2">
        {{ title }}
      </BaseTitle>
      <slot />
    </BaseContainer>
  </main>
</template>

<script>
import BaseContainer from "@/components/base/BaseContainer";
import BaseLogo from "@/components/base/BaseLogo";
import BaseTitle from "@/components/base/BaseTitle";

export default {
  name: "LayoutMinimal",
  components: {
    BaseContainer,
    BaseLogo,
    BaseTitle
  },
  props: {
    width: {
      default: "slim",
      type: String
    },
    title: {
      default: "",
      type: String
    },
    center: {
      default: false,
      required: false,
      type: Boolean
    }
  }
};
</script>

<style lang="sass" scoped>
.space-top
  margin-top: 5rem

.space-bottom
  margin-bottom: 5rem

.center-content
  text-align: center
</style>