1# Page Anatomy
2Single-file components (SFC) consist of a `template`, `script` and `style` block.
3
4## Template block
5When creating a new page, each template consists of at least 3 components:
6- `<b-container>`
7- `<page-title>`
8- `<page-section>`
9
10### Page container
11Use 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.
12
13[Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers).
14
15### Page title component
16By 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.
17
18Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string.
19
20### Page section component
21The `<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.
22```vue
23<template>
24  <b-container fluid="xl">
25    <page-title :description="$t('pageName.pageDescription')"/>
26    <page-section :section-title="$t('pageName.sectionTitle')">
27      // Page content goes here
28    </page-section>
29  </b-container>
30</template>
31```
32
33## Scripts block
34In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property.
35```vue
36<script>
37import PageTitle from '@/components/Global/PageTitle';
38import PageSection from '@/components/Global/PageSection';
39export default {
40  name: 'PageName',
41  components: { PageTitle, PageSection }
42};
43</script>
44```
45
46## Style block
47Add the `scoped` attribute to the style block to keep the styles isolated to the SFC. While the `scoped` attribute is optional, it is preferred and global changes should be done in global style sheets.
48```vue
49<style lang="scss" scoped> </style>
50```
51
52## Complete single-file component (SFC)
53The final SFC will look like this.
54```vue
55<template>
56  <b-container fluid="xl">
57    <page-title :description="$t('pageName.pageDescription')"/>
58    <page-section :section-title="$t('pageName.sectionTitle')">
59      // Page content goes here
60    </page-section>
61  </b-container>
62</template>
63<script>
64import PageTitle from '@/components/Global/PageTitle';
65import PageSection from '@/components/Global/PageSection';
66export default {
67  name: 'PageName',
68  components: { PageTitle, PageSection }
69};
70</script>
71<style lang="scss" scoped>
72    .example-class {
73      /* Styles go here */
74    }
75 </style>
76```