summaryrefslogtreecommitdiff
path: root/docs/guide/quickstart/page-anatomy.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/guide/quickstart/page-anatomy.md')
-rw-r--r--docs/guide/quickstart/page-anatomy.md18
1 files changed, 5 insertions, 13 deletions
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md
index c0419acd..ed17c04e 100644
--- a/docs/guide/quickstart/page-anatomy.md
+++ b/docs/guide/quickstart/page-anatomy.md
@@ -7,31 +7,23 @@ When creating a new page, each template consists of at least 3 components:
- `<page-title>`
- `<page-section>`
-### Page container
-Use the `fluid="xl"` prop on the `<b-container>` component to render a container that is always 100% width on larger screen sizes. Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
+Learn more about the [page container, page title and page section](/guide/components/page) components.
-[Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers).
-
-### Page title component
-By including the `<page-title>` component in the template, it will automatically render the page title that corresponds with the title property set in the route record's meta field.
-
-Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string.
-
-### Page section component
-The `<page-section>` component will render semantic HTML. By adding a `:section-title` prop to the `<page-section>` component, the localized text string will be rendered in an `h2` header element.
```vue
<template>
<b-container fluid="xl">
- <page-title :description="$t('pageName.pageDescription')"/>
+ <page-title />
<page-section :section-title="$t('pageName.sectionTitle')">
// Page content goes here
</page-section>
</b-container>
</template>
```
-
## Scripts block
In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property.
+
+Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
+
```vue
<script>
import PageTitle from '@/components/Global/PageTitle';