From 8d129109ec70a946ca5db879cd81f216ff3c804e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 19 Dec 2019 09:51:55 -0800
Subject: Add page level layout components

Adding components to help standardize type, size, spacing
for common elements on a page.

Also removed a conflicting class name and added modifications
to the main container. The main container needed a min-height
and height value set, which became apparent with added
background color. Adding a background color will move us
closer to agreed design solution to add a subtle background
color instead of adding a border to separate main content from
left hand navigation.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie63c4f0c0f3fd199fa0ca790065402e06a613691
---
 src/components/Global/PageTitle.vue | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/Global/PageTitle.vue

(limited to 'src/components/Global/PageTitle.vue')

diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
new file mode 100644
index 00000000..02314249
--- /dev/null
+++ b/src/components/Global/PageTitle.vue
@@ -0,0 +1,31 @@
+<template>
+  <header class="page-title">
+    <h1>{{ title }}</h1>
+    <p v-if="description">{{ description }}</p>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+  props: ['description'],
+  data() {
+    return {
+      title: this.$route.meta.title
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  margin-bottom: $spacer * 2;
+}
+h1 {
+  font-weight: $display4-weight;
+  line-height: $display-line-height;
+}
+p {
+  max-width: 72ch;
+}
+</style>
-- 
cgit v1.2.3