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
10Learn more about the [page container, page title and page section](/guide/components/page) components.
11
12```vue
13<template>
14  <b-container fluid="xl">
15    <page-title />
16    <page-section :section-title="$t('pageName.sectionTitle')">
17      // Page content goes here
18    </page-section>
19  </b-container>
20</template>
21```
22## Scripts block
23In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property.
24
25Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
26
27```vue
28<script>
29import PageTitle from '@/components/Global/PageTitle';
30import PageSection from '@/components/Global/PageSection';
31export default {
32  name: 'PageName',
33  components: { PageTitle, PageSection }
34};
35</script>
36```
37
38## Style block
39Add 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.
40```vue
41<style lang="scss" scoped> </style>
42```
43
44## Complete single-file component (SFC)
45The final SFC will look like this.
46```vue
47<template>
48  <b-container fluid="xl">
49    <page-title :description="$t('pageName.pageDescription')"/>
50    <page-section :section-title="$t('pageName.sectionTitle')">
51      // Page content goes here
52    </page-section>
53  </b-container>
54</template>
55<script>
56import PageTitle from '@/components/Global/PageTitle';
57import PageSection from '@/components/Global/PageSection';
58export default {
59  name: 'PageName',
60  components: { PageTitle, PageSection }
61};
62</script>
63<style lang="scss" scoped>
64    .example-class {
65      /* Styles go here */
66    }
67 </style>
68```