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