126c8fae0SDixsie Wolmers# Page Anatomy 2*7385e139SPatrick Williams 349287562SDerick MontagueSingle-file components (SFC) consist of a `template`, `script` and `style` 449287562SDerick Montagueblock. 526c8fae0SDixsie Wolmers 626c8fae0SDixsie Wolmers## Template block 7*7385e139SPatrick Williams 826c8fae0SDixsie WolmersWhen creating a new page, each template consists of at least 3 components: 9*7385e139SPatrick Williams 1026c8fae0SDixsie Wolmers- `<b-container>` 1126c8fae0SDixsie Wolmers- `<page-title>` 1226c8fae0SDixsie Wolmers- `<page-section>` 1326c8fae0SDixsie Wolmers 14*7385e139SPatrick WilliamsLearn more about the [page title](/guide/components/page-title)and 15*7385e139SPatrick Williams[page section](/guide/components/page-section) components. 1626c8fae0SDixsie Wolmers 1726c8fae0SDixsie Wolmers```vue 1826c8fae0SDixsie Wolmers<template> 1926c8fae0SDixsie Wolmers <b-container fluid="xl"> 20e2707ef0SDixsie Wolmers <page-title /> 2126c8fae0SDixsie Wolmers <page-section :section-title="$t('pageName.sectionTitle')"> 2226c8fae0SDixsie Wolmers // Page content goes here 2326c8fae0SDixsie Wolmers </page-section> 2426c8fae0SDixsie Wolmers </b-container> 2526c8fae0SDixsie Wolmers</template> 2626c8fae0SDixsie Wolmers``` 27*7385e139SPatrick Williams 2826c8fae0SDixsie Wolmers## Scripts block 29*7385e139SPatrick Williams 3049287562SDerick MontagueIn the scripts section, be sure to import the `PageTitle` and `PageSection` 3149287562SDerick Montaguecomponents and declare them in the `components` property. 32e2707ef0SDixsie Wolmers 3349287562SDerick MontagueImporting `BContainer` in the [scripts block](#scripts-block) is not required as 3449287562SDerick Montagueit is already registered globally. 35e2707ef0SDixsie Wolmers 3626c8fae0SDixsie Wolmers```vue 3726c8fae0SDixsie Wolmers<script> 38*7385e139SPatrick Williamsimport PageTitle from "@/components/Global/PageTitle"; 39*7385e139SPatrick Williamsimport PageSection from "@/components/Global/PageSection"; 4026c8fae0SDixsie Wolmersexport default { 41*7385e139SPatrick Williams name: "PageName", 42*7385e139SPatrick Williams components: { PageTitle, PageSection }, 4326c8fae0SDixsie Wolmers}; 4426c8fae0SDixsie Wolmers</script> 4526c8fae0SDixsie Wolmers``` 4626c8fae0SDixsie Wolmers 4726c8fae0SDixsie Wolmers## Style block 48*7385e139SPatrick Williams 4949287562SDerick MontagueAdd the `scoped` attribute to the style block to keep the styles isolated to the 5049287562SDerick MontagueSFC. While the `scoped` attribute is optional, it is preferred and global 5149287562SDerick Montaguechanges should be done in global style sheets. 52*7385e139SPatrick Williams 5326c8fae0SDixsie Wolmers```vue 5426c8fae0SDixsie Wolmers<style lang="scss" scoped></style> 5526c8fae0SDixsie Wolmers``` 5626c8fae0SDixsie Wolmers 5726c8fae0SDixsie Wolmers## Complete single-file component (SFC) 58*7385e139SPatrick Williams 5926c8fae0SDixsie WolmersThe final SFC will look like this. 60*7385e139SPatrick Williams 6126c8fae0SDixsie Wolmers```vue 6226c8fae0SDixsie Wolmers<template> 6326c8fae0SDixsie Wolmers <b-container fluid="xl"> 6426c8fae0SDixsie Wolmers <page-title :description="$t('pageName.pageDescription')" /> 6526c8fae0SDixsie Wolmers <page-section :section-title="$t('pageName.sectionTitle')"> 6626c8fae0SDixsie Wolmers // Page content goes here 6726c8fae0SDixsie Wolmers </page-section> 6826c8fae0SDixsie Wolmers </b-container> 6926c8fae0SDixsie Wolmers</template> 7026c8fae0SDixsie Wolmers<script> 71*7385e139SPatrick Williamsimport PageTitle from "@/components/Global/PageTitle"; 72*7385e139SPatrick Williamsimport PageSection from "@/components/Global/PageSection"; 7326c8fae0SDixsie Wolmersexport default { 74*7385e139SPatrick Williams name: "PageName", 75*7385e139SPatrick Williams components: { PageTitle, PageSection }, 7626c8fae0SDixsie Wolmers}; 7726c8fae0SDixsie Wolmers</script> 7826c8fae0SDixsie Wolmers<style lang="scss" scoped> 7926c8fae0SDixsie Wolmers.example-class { 8026c8fae0SDixsie Wolmers /* Styles go here */ 8126c8fae0SDixsie Wolmers} 8226c8fae0SDixsie Wolmers</style> 8326c8fae0SDixsie Wolmers``` 84