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