diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index dd6dbd9af9..c01dbcbd0e 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -136,6 +136,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Then add some classes when using it:
 
 ```html
diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md
index 0b6b9746c0..99758cf76e 100644
--- a/src/guide/component-attrs.md
+++ b/src/guide/component-attrs.md
@@ -18,6 +18,10 @@ app.component('date-picker', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 In the event we need to define the status of the date-picker component via a `data-status` attribute, it will be applied to the root node (i.e., `div.date-picker`).
 
 ```html
diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md
index 68d340d405..40fd1039fc 100644
--- a/src/guide/component-custom-events.md
+++ b/src/guide/component-custom-events.md
@@ -89,6 +89,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 
 ## Multiple `v-model` bindings
 
diff --git a/src/guide/component-props.md b/src/guide/component-props.md
index 94e9505f82..bb2e9b8d17 100644
--- a/src/guide/component-props.md
+++ b/src/guide/component-props.md
@@ -267,3 +267,7 @@ app.component('blog-post', {
 ```
 
 Again, if you're using string templates, this limitation does not apply.
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md
index dcf966dc95..27657c2fd2 100644
--- a/src/guide/component-provide-inject.md
+++ b/src/guide/component-provide-inject.md
@@ -49,6 +49,10 @@ app.component('todo-list-statistics', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 However, this won't work if we try to provide some component instance property here:
 
 ```js
diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md
index 154d4f8a8d..8c688a2cc0 100644
--- a/src/guide/component-slots.md
+++ b/src/guide/component-slots.md
@@ -247,6 +247,10 @@ app.component('todo-list', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 We might want to replace the <span v-pre>`{{ item }}`</span> with a `<slot>` to customize it on parent component:
 
 ```html
diff --git a/src/guide/component-template-refs.md b/src/guide/component-template-refs.md
index e87de3f650..1e90686f2c 100644
--- a/src/guide/component-template-refs.md
+++ b/src/guide/component-template-refs.md
@@ -28,6 +28,10 @@ app.component('base-input', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Also, you can add another `ref` to the component itself and use it to trigger `focusInput` event from the parent component:
 
 ```html
diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index 4d7a0a6152..5a73237afa 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -212,6 +212,10 @@ app.component('my-component', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.
 
 With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md
index 4806bb5f8a..b4381b76dd 100644
--- a/src/guide/data-methods.md
+++ b/src/guide/data-methods.md
@@ -125,3 +125,7 @@ app.component('save-button', {
   `
 })
 ```
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 5dfd68f907..a0532bb649 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -235,6 +235,10 @@ app.component('todo-item', {
 app.mount(...)
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Now you can compose it in another component's template:
 
 ```html
diff --git a/src/guide/list.md b/src/guide/list.md
index db7429f300..28ce6fa18a 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -355,3 +355,7 @@ app.mount('#todo-list-example')
 ```
 
 <common-codepen-snippet title="v-for with components" slug="abOaWpz" tab="js,result" :preview="false" />
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index fda002f2e2..c1809be428 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -55,6 +55,10 @@ app.component('anchored-heading', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 This template doesn't feel great. It's not only verbose, but we're duplicating `<slot></slot>` for every heading level. And when we add the anchor element, we have to again duplicate it in every `v-if/v-else-if` branch.
 
 While templates work great for most components, it's clear that this isn't one of them. So let's try rewriting it with a `render()` function:
diff --git a/src/guide/teleport.md b/src/guide/teleport.md
index c47ff0c571..7da2933ec9 100644
--- a/src/guide/teleport.md
+++ b/src/guide/teleport.md
@@ -51,6 +51,10 @@ app.component('modal-button', {
 })
 ```
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 When using this component inside the initial HTML structure, we can see a problem - the modal is being rendered inside the deeply nested `div` and the `position: absolute` of the modal takes the parent relatively positioned `div` as reference.
 
 Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.
diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md
index c180e96d5e..6e3dc240c7 100644
--- a/src/guide/transitions-enterleave.md
+++ b/src/guide/transitions-enterleave.md
@@ -551,3 +551,7 @@ Vue.createApp(Demo).mount('#demo')
 ```
 
 <common-codepen-snippet title="Transitioning between components" slug="WNwVxZw" tab="html,result" theme="39028" />
+
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
diff --git a/src/guide/transitions-state.md b/src/guide/transitions-state.md
index 7310b3819a..1513e67b85 100644
--- a/src/guide/transitions-state.md
+++ b/src/guide/transitions-state.md
@@ -130,6 +130,10 @@ app.mount('#app')
 
 <common-codepen-snippet title="State Transition Components" slug="e9ef8ac7e32e0d0337e03d20949b4d17" tab="js,result" :editable="false" />
 
+::: info
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+:::
+
 Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions-enterleave.html). Together, there are very few limits to what can be accomplished.
 
 You can see how we could use this for data visualization, for physics effects, for character animations and interactions, the sky's the limit.