diff --git a/src/components/ReadMore.astro b/src/components/ReadMore.astro
new file mode 100644
index 0000000000000..bc8ac40174822
--- /dev/null
+++ b/src/components/ReadMore.astro
@@ -0,0 +1,24 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+---
+
+<div class="read-more">
+	<Icon class="icon" name="open-book" />
+	<span><slot /></span>
+</div>
+
+<style>
+	.read-more {
+		display: flex;
+		gap: 0.5rem;
+		align-items: flex-start;
+	}
+	.icon {
+		--icon-size: 1.5rem;
+		font-size: var(--icon-size);
+		flex-shrink: 0;
+		/* Align to the middle of the first line of text. */
+		margin-block: calc((var(--sl-line-height) * 1rem - var(--icon-size)) / 2);
+		color: var(--sl-color-text-accent);
+	}
+</style>
diff --git a/src/components/RecipeLinks.astro b/src/components/RecipeLinks.astro
index a8afaa1f823d4..f37498efff465 100644
--- a/src/components/RecipeLinks.astro
+++ b/src/components/RecipeLinks.astro
@@ -34,7 +34,7 @@ if (!firstRecipe) {
 
 <div class="root">
 	<div class="flex">
-		<img src="/houston_chef.webp" width="26" alt="" />
+		<img src="/houston_chef.webp" width="24" alt="" />
 		<strong><UIString key={labelKey} /></strong>
 		{
 			!isList && (
@@ -64,19 +64,10 @@ if (!firstRecipe) {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
-		gap: 0.25rem;
-	}
-	.flex > img {
-		margin-right: 0.25rem;
+		gap: 0.5rem;
 	}
 	ul {
-		margin-left: 0.5rem;
-	}
-	.root {
-		background-color: var(--theme-bg-offset);
-		border-radius: 8px;
-		padding: 24px;
-		width: max-content;
-		max-width: 100%;
+		margin-top: 0 !important;
+		margin-inline-start: 0.5rem;
 	}
 </style>
diff --git a/src/content/docs/en/core-concepts/astro-components.mdx b/src/content/docs/en/core-concepts/astro-components.mdx
index 6ea948662dfb7..36afd92b5cb09 100644
--- a/src/content/docs/en/core-concepts/astro-components.mdx
+++ b/src/content/docs/en/core-concepts/astro-components.mdx
@@ -383,4 +383,6 @@ A [`<slot />` element](/en/core-concepts/astro-components/#slots) inside an HTML
 
 ## Next Steps
 
-📚 Learn about using [UI framework components](/en/core-concepts/framework-components/) in your Astro project.
+import ReadMore from '~/components/ReadMore.astro';
+
+<ReadMore>Read more about using [UI framework components](/en/core-concepts/framework-components/) in your Astro project.</ReadMore>
diff --git a/src/content/docs/en/core-concepts/astro-pages.mdx b/src/content/docs/en/core-concepts/astro-pages.mdx
index 5b5d9a0c07eca..419aa2a47dbf0 100644
--- a/src/content/docs/en/core-concepts/astro-pages.mdx
+++ b/src/content/docs/en/core-concepts/astro-pages.mdx
@@ -4,6 +4,7 @@ description: An introduction to Astro pages
 i18nReady: true
 ---
 
+import ReadMore from '~/components/ReadMore.astro';
 import Since from '~/components/Since.astro'
 
 **Pages** are files that live in the `src/pages/` subdirectory of your Astro project. They are responsible for handling routing, data loading, and overall page layout for every page in your website.
@@ -23,7 +24,7 @@ Astro leverages a routing strategy called **file-based routing**. Each file in y
 
 A single file can also generate multiple pages using [dynamic routing](/en/core-concepts/routing/#dynamic-routes). This allows you to create pages even if your content lives outside of the special `/pages/` directory, such as in a [content collection](/en/guides/content-collections/) or a [CMS](/en/guides/cms/).
 
-📚 Read more about [Routing in Astro](/en/core-concepts/routing/).
+<ReadMore>Read more about [Routing in Astro](/en/core-concepts/routing/).</ReadMore>
 
 ### Link between pages
 
@@ -66,7 +67,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 </MySiteLayout>
 ```
 
-📚 Read more about [layout components](/en/core-concepts/layouts/) in Astro.
+<ReadMore>Read more about [layout components](/en/core-concepts/layouts/) in Astro.</ReadMore>
 
 ## Markdown/MDX Pages
 
@@ -87,7 +88,7 @@ title: 'My Markdown page'
 This is my page, written in **Markdown.**
 ```
 
-📚 Read more about [Markdown](/en/guides/markdown-content/) in Astro.
+<ReadMore>Read more about [Markdown](/en/guides/markdown-content/) in Astro.</ReadMore>
 
 ## HTML Pages
 
diff --git a/src/content/docs/en/core-concepts/framework-components.mdx b/src/content/docs/en/core-concepts/framework-components.mdx
index b25b70d6f7eb1..ccc8001f26305 100644
--- a/src/content/docs/en/core-concepts/framework-components.mdx
+++ b/src/content/docs/en/core-concepts/framework-components.mdx
@@ -4,6 +4,7 @@ description: Learn how to use React, Svelte, etc.
 i18nReady: true
 ---
 import IntegrationsNav from '~/components/IntegrationsNav.astro'
+import ReadMore from '~/components/ReadMore.astro'
 
 Build your Astro website without sacrificing your favorite component framework. Create Astro [islands](/en/concepts/islands/) with the UI frameworks of your choice.
 
@@ -79,7 +80,7 @@ Most framework-specific accessibility patterns should work the same when these c
 
 There are several hydration directives available for UI framework components: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` and `client:only={FRAMEWORK}`.
 
-📚 See our [directives reference](/en/reference/directives-reference/#client-directives) page for a full description of these hydration directives, and their usage.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#client-directives) page for a full description of these hydration directives, and their usage.</ReadMore>
 
 ## Mixing Frameworks
 
@@ -233,7 +234,7 @@ If you try to hydrate an Astro component with a `client:` modifier, you will get
 
 [Astro components](/en/core-concepts/astro-components/) are HTML-only templating components with no client-side runtime. But, you can use a `<script>` tag in your Astro component template to send JavaScript to the browser that executes in the global scope.
 
-📚 Learn more about [client-side `<script>` tags in Astro components](/en/guides/client-side-scripts/)
+<ReadMore>Learn more about [client-side `<script>` tags in Astro components](/en/guides/client-side-scripts/)</ReadMore>
 
 [mdn-io]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 [mdn-ric]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
diff --git a/src/content/docs/en/core-concepts/layouts.mdx b/src/content/docs/en/core-concepts/layouts.mdx
index 998868d69fb0c..24edb0faceae6 100644
--- a/src/content/docs/en/core-concepts/layouts.mdx
+++ b/src/content/docs/en/core-concepts/layouts.mdx
@@ -4,6 +4,8 @@ description: An intro to layouts, a type of Astro component that is shared betwe
 i18nReady: true
 ---
 
+import ReadMore from '~/components/ReadMore.astro'
+
 **Layouts** are [Astro components](/en/core-concepts/astro-components/) used to provide a reusable UI structure, such as a page template.
 
 We conventionally use the term "layout" for Astro components that provide common UI elements shared across pages such as headers, navigation bars, and footers. A typical Astro layout component provides [Astro, Markdown or MDX pages](/en/core-concepts/astro-pages/) with:
@@ -54,7 +56,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 ```
 
 
-📚 Learn more about [slots](/en/core-concepts/astro-components/#slots).
+<ReadMore>Learn more about [slots](/en/core-concepts/astro-components/#slots).</ReadMore>
 
 ## Markdown/MDX Layouts
 
@@ -227,7 +229,7 @@ const { title, fancyJsHelper } = Astro.props;
 <!-- -->
 ```
 
-📚 Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/).
+<ReadMore>Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/).</ReadMore>
 
 ## Using one Layout for `.md`, `.mdx`, and `.astro`
 
diff --git a/src/content/docs/en/core-concepts/routing.mdx b/src/content/docs/en/core-concepts/routing.mdx
index 5d0a630389fa0..497e5502c57b9 100644
--- a/src/content/docs/en/core-concepts/routing.mdx
+++ b/src/content/docs/en/core-concepts/routing.mdx
@@ -6,6 +6,7 @@ i18nReady: true
 import FileTree from '~/components/FileTree.astro'
 import RecipeLinks from "~/components/RecipeLinks.astro"
 import Since from '~/components/Since.astro'
+import ReadMore from '~/components/ReadMore.astro'
 
 Astro uses **file-based routing** to generate your build URLs based on the file layout of your project `src/pages/` directory.
 
@@ -83,7 +84,8 @@ This will generate `/en-v1/info` and `/fr-v2/info`.
 
 Parameters can be included in separate parts of the path. For example, the file `src/pages/[lang]/[version]/info.astro` with the same `getStaticPaths()` above will generate the routes `/en/v1/info` and `/fr/v2/info`.
 
-📚 Learn more about [`getStaticPaths()`](/en/reference/api-reference/#getstaticpaths).
+<ReadMore>Learn more about [`getStaticPaths()`](/en/reference/api-reference/#getstaticpaths).</ReadMore>
+
 
 <RecipeLinks slugs={["en/recipes/i18n"]} />
 
diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx
index 6bf5ca1096b2a..df3ebb9b4fc6e 100644
--- a/src/content/docs/en/editor-setup.mdx
+++ b/src/content/docs/en/editor-setup.mdx
@@ -20,7 +20,9 @@ Astro works with any code editor. However, VS Code is our recommended editor for
 
 To get started, install the [Astro VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) today.
 
-📚 See how to [set up TypeScript](/en/guides/typescript/) in your Astro project.
+import ReadMore from '~/components/ReadMore.astro';
+
+<ReadMore>See how to [set up TypeScript](/en/guides/typescript/) in your Astro project.</ReadMore>
 
 ## JetBrains IDEs
 
diff --git a/src/content/docs/en/guides/client-side-scripts.mdx b/src/content/docs/en/guides/client-side-scripts.mdx
index 61ad83ae09690..92a7471e0e868 100644
--- a/src/content/docs/en/guides/client-side-scripts.mdx
+++ b/src/content/docs/en/guides/client-side-scripts.mdx
@@ -5,6 +5,7 @@ description: >-
   JavaScript APIs.
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can add interactivity to your Astro components without [using a UI framework](/en/core-concepts/framework-components/) like React, Svelte, Vue, etc. using standard HTML `<script>` tags. This allows you to send JavaScript to run in the browser and add functionality to your Astro components.
 
@@ -87,7 +88,8 @@ To prevent Astro from processing a script, add the `is:inline` directive.
 Astro will not process your script tags in some situations. In particular, adding `type="module"` or any attribute other than `src` to a `<script>` tag will cause Astro to treat the tag as if it had an `is:inline` directive. The same will be true when the script is written in a JSX expression.
 :::
 
-📚 See our [directives reference](/en/reference/directives-reference/#script--style-directives) page for more information about the directives available on `<script>` tags.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#script--style-directives) page for more information about the directives available on `<script>` tags.</ReadMore>
+
 
 ### Include javascript files on your page
 
@@ -190,7 +192,8 @@ There are two advantages to using a custom element here:
 
 2. Although a `<script>` only runs once, the browser will run our custom element’s `constructor()` method each time it finds `<astro-heart>` on the page. This means you can safely write code for one component at a time, even if you intend to use this component multiple times on a page.
 
-📚 You can learn more about custom elements in [web.dev’s Reusable Web Components guide](https://web.dev/custom-elements-v1/) and [MDN’s introduction to custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
+<ReadMore>You can learn more about custom elements in [web.dev’s Reusable Web Components guide](https://web.dev/custom-elements-v1/) and [MDN’s introduction to custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).</ReadMore>
+
 
 ### Pass frontmatter variables to scripts
 
diff --git a/src/content/docs/en/guides/configuring-astro.mdx b/src/content/docs/en/guides/configuring-astro.mdx
index f8e8e8cb96532..6cdb3bfcd5fea 100644
--- a/src/content/docs/en/guides/configuring-astro.mdx
+++ b/src/content/docs/en/guides/configuring-astro.mdx
@@ -2,10 +2,12 @@
 title: Configuring Astro
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 Customize how Astro works by adding an `astro.config.mjs` file in your project. This is a common file in Astro projects, and all official example templates and themes ship with one by default.
 
-📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.
+<ReadMore>Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.</ReadMore>
+
 ## The Astro Config File
 
 A valid Astro config file exports its configuration using the `default` export, using the recommended `defineConfig` helper:
@@ -164,5 +166,5 @@ const { SECRET_PASSWORD } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
 
 ## Configuration Reference
 
-📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.
+<ReadMore>Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.</ReadMore>
 
diff --git a/src/content/docs/en/guides/content.mdx b/src/content/docs/en/guides/content.mdx
index 98d0113c3db63..873668db445d9 100644
--- a/src/content/docs/en/guides/content.mdx
+++ b/src/content/docs/en/guides/content.mdx
@@ -7,6 +7,7 @@ description: >-
 i18nReady: false
 ---
 import RecipeLinks from "~/components/RecipeLinks.astro"
+import ReadMore from '~/components/ReadMore.astro';
 
 Astro is a perfect choice for your content-focused site: blogs, marketing sites, portfolios, and more!
 
@@ -25,14 +26,14 @@ Markdown is a convenient syntax for writing rich text with basic formatting and
 
 Create and write a new `.md` file in your code editor or bring in an existing file written in your favorite Markdown editor. Some online Markdown editors like [StackEdit](https://stackedit.io/) and [Dillinger](https://dillinger.io) will even allow you to edit and sync your work with your Astro repository stored on GitHub.
 
-📚 Learn more about [writing Markdown content in Astro](/en/guides/markdown-content/).
+<ReadMore>Learn more about [writing Markdown content in Astro](/en/guides/markdown-content/).</ReadMore>
 
 ### MDX Authoring
 If you add the MDX integration to your project, you can also write content using `.mdx` files, which let you include JavaScript expressions and custom components within your Markdown. This includes both static [Astro components](/en/core-concepts/astro-components/) and interactive [framework components](/en/core-concepts/framework-components/). Add UI elements such as a banner or an interactive carousel right in your text to turn your content into full-fledged web pages.
 
 Write and edit `.mdx` files directly in your code editor, alongside your project files.
 
-📚 Learn more about [using MDX with Astro](/en/guides/integrations-guide/mdx/).
+<ReadMore>Learn more about [using MDX with Astro](/en/guides/integrations-guide/mdx/).</ReadMore>
 
 ### Headless CMS Authoring
 
diff --git a/src/content/docs/en/guides/deploy/cloudflare.mdx b/src/content/docs/en/guides/deploy/cloudflare.mdx
index 5fd5ed3d88ad3..630d1322090bf 100644
--- a/src/content/docs/en/guides/deploy/cloudflare.mdx
+++ b/src/content/docs/en/guides/deploy/cloudflare.mdx
@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Cloudflare Pages.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can deploy your Astro project on [Cloudflare Pages](https://pages.cloudflare.com/), a platform for frontend developers to collaborate and deploy static (JAMstack) and SSR websites.
 
@@ -127,7 +128,7 @@ There are currently two modes supported when using Pages Functions with the [`@a
 
 To get started, create a `/functions` directory at the root of your project. Writing your Functions files in this directory automatically generates a Worker with custom functionality at the predesignated routes. To learn more about writing Functions, see the [Pages Functions documentation](https://developers.cloudflare.com/pages/platform/functions/).
 
-📚 Read more about [SSR in Astro](/en/guides/server-side-rendering/).
+<ReadMore>Read more about [SSR in Astro](/en/guides/server-side-rendering/).</ReadMore>
 
 ## Troubleshooting
 
diff --git a/src/content/docs/en/guides/deploy/deno.mdx b/src/content/docs/en/guides/deploy/deno.mdx
index f75b5a09181cf..c8354d1890576 100644
--- a/src/content/docs/en/guides/deploy/deno.mdx
+++ b/src/content/docs/en/guides/deploy/deno.mdx
@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Deno.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can deploy a server-side rendered Astro site to [Deno Deploy](https://deno.com/deploy), a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide.
 
@@ -170,6 +171,7 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno
     ```
 
 
-📚 Read more about [SSR in Astro](/en/guides/server-side-rendering/).
+<ReadMore>Read more about [SSR in Astro](/en/guides/server-side-rendering/).</ReadMore>
+
 
 [Deno adapter]: https://github.com/denoland/deno-astro-adapter
diff --git a/src/content/docs/en/guides/deploy/netlify.mdx b/src/content/docs/en/guides/deploy/netlify.mdx
index d5547abe95f93..400b9b33e0c09 100644
--- a/src/content/docs/en/guides/deploy/netlify.mdx
+++ b/src/content/docs/en/guides/deploy/netlify.mdx
@@ -4,6 +4,8 @@ description: How to deploy your Astro site to the web on Netlify.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
+
 [Netlify](https://netlify.com) offers hosting and serverless backend services for web applications and static websites. Any Astro site can be hosted on Netlify!
 
 This guide includes instructions for deploying to Netlify through the website UI or Netlify's CLI.
@@ -96,7 +98,7 @@ To configure the default settings, create a `netlify.toml` file with the followi
   publish = "dist"
 ```
 
-📚 More info at [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) on Netlify’s blog
+<ReadMore>More info at [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) on Netlify’s blog</ReadMore>
 
 
 ### CLI Deployment
@@ -120,7 +122,7 @@ You can also create a new site on Netlify and link up your Git repository by ins
 
     The CLI will add a deploy key to the repository, which means your site will be automatically rebuilt on Netlify every time you `git push`.
 
-📚 More details from Netlify on [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)
+<ReadMore>More details from Netlify on [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)</ReadMore>
 
 ### Set a Node.js Version
 
diff --git a/src/content/docs/en/guides/deploy/vercel.mdx b/src/content/docs/en/guides/deploy/vercel.mdx
index faa838700e13f..98b9ed8d8fde2 100644
--- a/src/content/docs/en/guides/deploy/vercel.mdx
+++ b/src/content/docs/en/guides/deploy/vercel.mdx
@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web on Vercel.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global edge network with zero configuration.
 
@@ -60,7 +61,7 @@ You can deploy to Vercel through the website UI or using Vercel’s CLI (command
 
 After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).
 
-📚 Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).
+<ReadMore>Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).</ReadMore>
 
 
 ### CLI Deployment
@@ -81,7 +82,7 @@ After your project has been imported and deployed, all subsequent pushes to bran
 
 You can use `vercel.json` to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments. 
 
-📚 Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).
+<ReadMore>Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).</ReadMore>
 
 ### Upgrading to Astro 2.0
 
diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index f87e53f6cd5c4..4b9be592bba41 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -4,6 +4,7 @@ description: Learn how to import different content types with Astro.
 i18nReady: true
 ---
 import RecipeLinks from "~/components/RecipeLinks.astro";
+import ReadMore from '~/components/ReadMore.astro'
 
 Astro supports most static assets with zero configuration required. You can use the `import` statement anywhere in your project JavaScript (including your Astro frontmatter) and Astro will include a built, optimized copy of that static asset in your final build. `@import` is also supported inside of CSS & `<style>` tags.
 
@@ -61,7 +62,8 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx
 
 :::
 
-📚 Read more about [TypeScript support in Astro](/en/guides/typescript/).
+<ReadMore>Read more about [TypeScript support in Astro](/en/guides/typescript/).</ReadMore>
+
 
 ### JSX / TSX
 
diff --git a/src/content/docs/en/guides/integrations-guide/markdoc.mdx b/src/content/docs/en/guides/integrations-guide/markdoc.mdx
index 416dd587a5e2f..7ec770d5c0867 100644
--- a/src/content/docs/en/guides/integrations-guide/markdoc.mdx
+++ b/src/content/docs/en/guides/integrations-guide/markdoc.mdx
@@ -8,6 +8,7 @@ i18nReady: true
 ---
 import FileTree from '~/components/FileTree.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import ReadMore from '~/components/ReadMore.astro';
 
 This **[Astro integration][astro-integration]** enables the usage of [Markdoc](https://markdoc.dev/) to create components, pages, and content collection entries.
 
@@ -114,7 +115,7 @@ const { Content } = await entry.render();
 <Content />
 ```
 
-📚 See the [Astro Content Collection docs][astro-content-collections] for more information.
+<ReadMore>See the [Astro Content Collection docs][astro-content-collections] for more information.</ReadMore>
 
 ## Markdoc config
 
@@ -252,7 +253,7 @@ export default defineMarkdocConfig({
 });
 ```
 
-📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide](/en/guides/markdown-content/#prism-configuration).
+<ReadMore>To learn about configuring Prism stylesheets, [see our syntax highlighting guide](/en/guides/markdown-content/#prism-configuration).</ReadMore>
 
 ### Set the root HTML element
 
@@ -290,7 +291,7 @@ export default defineMarkdocConfig({
 });
 ```
 
-📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes)
+<ReadMore>See the [Markdoc nodes documentation](https://markdoc.dev/docs/nodes#built-in-nodes) to learn about all the built-in nodes and attributes.</ReadMore>
 
 ### Use client-side UI components
 
@@ -355,7 +356,7 @@ Now, you can call this function from any Markdoc content entry:
 ¡Hola {% getCountryEmoji("spain") %}!
 ```
 
-📚 [See the Markdoc documentation](https://markdoc.dev/docs/functions#creating-a-custom-function) for more on using variables or functions in your content.
+<ReadMore>[See the Markdoc documentation](https://markdoc.dev/docs/functions#creating-a-custom-function) for more on using variables or functions in your content.</ReadMore>
 
 ### Markdoc Language Server
 
diff --git a/src/content/docs/en/guides/integrations-guide/mdx.mdx b/src/content/docs/en/guides/integrations-guide/mdx.mdx
index 39559d070f87c..29b8bde36ef0e 100644
--- a/src/content/docs/en/guides/integrations-guide/mdx.mdx
+++ b/src/content/docs/en/guides/integrations-guide/mdx.mdx
@@ -7,6 +7,7 @@ category: other
 i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import ReadMore from '~/components/ReadMore.astro'
 
 This **[Astro integration][astro-integration]** enables the usage of [MDX](https://mdxjs.com/) components and allows you to create pages as `.mdx` files.
 
@@ -130,7 +131,7 @@ export default defineConfig({
 MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
 :::
 
-📚 See the [Markdown Options reference](/en/reference/configuration-reference/#markdown-options) for a complete list of options.
+<ReadMore>See the [Markdown Options reference](/en/reference/configuration-reference/#markdown-options) for a complete list of options.</ReadMore>
 
 ### `extendMarkdownConfig`
 
diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx
index dc23bf3d4e6f2..9ad0aa11941f7 100644
--- a/src/content/docs/en/guides/integrations-guide/vercel.mdx
+++ b/src/content/docs/en/guides/integrations-guide/vercel.mdx
@@ -8,6 +8,7 @@ i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import Since from '~/components/Since.astro';
+import ReadMore from '~/components/ReadMore.astro'
 
 This adapter allows Astro to deploy your [`hybrid` or `server` rendered site](/en/core-concepts/rendering-modes/#on-demand-rendered) to [Vercel](https://www.vercel.com/).
 
@@ -94,7 +95,7 @@ import vercel from '@astrojs/vercel/static';
 
 ## Usage
 
-📚 **[Read the full deployment guide here.](/en/guides/deploy/vercel/)**
+<ReadMore>Find out more about [deploying your project to Vercel](/en/guides/deploy/vercel/).</ReadMore>
 
 You can deploy by CLI (`vercel deploy`) or by connecting your new repo in the [Vercel Dashboard](https://vercel.com/). Alternatively, you can create a production build locally:
 
diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx
index 6cf87a43af7a9..ad728c562e950 100644
--- a/src/content/docs/en/guides/markdown-content.mdx
+++ b/src/content/docs/en/guides/markdown-content.mdx
@@ -6,7 +6,8 @@ i18nReady: true
 
 import Since from '~/components/Since.astro'
 import FileTree from '~/components/FileTree.astro'
-import RecipeLinks from "~/components/RecipeLinks.astro";
+import RecipeLinks from "~/components/RecipeLinks.astro"
+import ReadMore from '~/components/ReadMore.astro'
 
 [Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for standard Markdown files that can also include [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) to define custom metadata such as a title, description, and tags.
 
@@ -58,7 +59,8 @@ It probably isn't styled much, but Markdown does support:
 - and more!
 ```
 
-📚 Read more about Astro's [file-based routing](/en/core-concepts/routing/) or options for creating [dynamic routes](/en/core-concepts/routing/#dynamic-routes).
+<ReadMore>Read more about Astro's [file-based routing](/en/core-concepts/routing/) or options for creating [dynamic routes](/en/core-concepts/routing/#dynamic-routes).</ReadMore>
+
 
 ## Markdown Features
 
@@ -99,7 +101,7 @@ const {frontmatter} = Astro.props;
 
 You can also [style your Markdown](/en/guides/styling/#markdown-styling) in your layout component.
 
-📚 Learn more about [Markdown Layouts](/en/core-concepts/layouts/#markdownmdx-layouts).
+<ReadMore>Learn more about [Markdown Layouts](/en/core-concepts/layouts/#markdownmdx-layouts).</ReadMore>
 
 
 ### Heading IDs
diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
index b1218e26df723..ce4e350996fc5 100644
--- a/src/content/docs/en/guides/styling.mdx
+++ b/src/content/docs/en/guides/styling.mdx
@@ -7,7 +7,7 @@ i18nReady: true
 ---
 import Since from '~/components/Since.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import ReadMore from '~/components/ReadMore.astro'
 
 
 Astro was designed to make styling and writing CSS a breeze. Write your own CSS directly inside of an Astro component or import your favorite CSS library like [Tailwind][tailwind]. Advanced styling languages like [Sass][sass] and [Less][less] are also supported.
@@ -108,7 +108,7 @@ const { isRed } = Astro.props;
 </style>
 ```
 
-📚 See our [directives reference](/en/reference/directives-reference/#classlist) page to learn more about `class:list`.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#classlist) page to learn more about `class:list`.</ReadMore>
 
 ### CSS Variables
 
@@ -130,7 +130,8 @@ const backgroundColor = "rgb(24 121 78)";
 <h1>Hello</h1>
 ```
 
-📚 See our [directives reference](/en/reference/directives-reference/#definevars) page to learn more about `define:vars`.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#definevars) page to learn more about `define:vars`.</ReadMore>
+
 
 ### Passing a `class` to a child component
 
@@ -179,7 +180,7 @@ You can style HTML elements inline using the `style` attribute. This can be a CS
 
 There are two ways to resolve external global stylesheets: an ESM import for files located within your project source, and an absolute URL link for files in your `public/` directory, or hosted outside of your project.
 
-📚 Read more about using [static assets](/en/guides/imports/) located in `public/` or `src/`.
+<ReadMore>Read more about using [static assets](/en/guides/imports/) located in `public/` or `src/`.</ReadMore>
 
 ### Import a local stylesheet
 
@@ -453,7 +454,7 @@ To use Tailwind in your project, install the official [Astro Tailwind integratio
   </Fragment>
 </PackageManagerTabs>
 
-📚 See the [Integrations Guide](/en/guides/integrations-guide/) for instructions on installing, importing and configuring Astro integrations.
+<ReadMore>See the [Integrations Guide](/en/guides/integrations-guide/) for instructions on installing, importing and configuring Astro integrations.</ReadMore>
 
 
 ## CSS Preprocessors
diff --git a/src/content/docs/en/guides/typescript.mdx b/src/content/docs/en/guides/typescript.mdx
index 77fc4b6ef5907..556e930324e0c 100644
--- a/src/content/docs/en/guides/typescript.mdx
+++ b/src/content/docs/en/guides/typescript.mdx
@@ -281,9 +281,11 @@ To see type errors in your editor, please make sure that you have the [Astro VS
 `astro check` checks all the files included in your TypeScript project. To check types within Svelte and Vue files, you can use the [`svelte-check`](https://www.npmjs.com/package/svelte-check) and the [`vue-tsc`](https://www.npmjs.com/package/vue-tsc) packages respectively.
 :::
 
-📚 Read more about [`.ts` file imports](/en/guides/imports/#typescript) in Astro.
+import ReadMore from '~/components/ReadMore.astro'
 
-📚 Read more about [TypeScript Configuration](https://www.typescriptlang.org/tsconfig/).
+<ReadMore>Read more about [`.ts` file imports](/en/guides/imports/#typescript) in Astro.</ReadMore>
+
+<ReadMore>Read more about [TypeScript Configuration](https://www.typescriptlang.org/tsconfig/).</ReadMore>
 
 ## Troubleshooting
 
diff --git a/src/content/docs/en/install/auto.mdx b/src/content/docs/en/install/auto.mdx
index e4f0e82f3f4ab..0902766ddaa6f 100644
--- a/src/content/docs/en/install/auto.mdx
+++ b/src/content/docs/en/install/auto.mdx
@@ -133,8 +133,22 @@ Success! You are now ready to start building with Astro! 🥳
 
 Here are a few topics that we recommend exploring next. You can read them in any order. You can even leave our documentation for a bit and go play in your new Astro project codebase, coming back here whenever you run into trouble or have a question.
 
-📚 **Add a framework:** Learn how to extend Astro with support for React, Svelte, Tailwind and more using `npx astro add` in our [Integrations guide](/en/guides/integrations-guide/).
-
-📚 **Deploy your site:** Learn how to build and deploy an Astro project to the web in our [Deployment guide](/en/guides/deploy/).
-
-📚 **Understand your codebase:** Learn more about Astro’s project structure in our [Project Structure guide](/en/core-concepts/project-structure/).
+import { CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+<CardGrid>
+  <LinkCard
+    title="Understand your codebase"
+    description="Learn more about Astro’s file structure in our Project Structure guide."
+    href="/en/core-concepts/project-structure/"
+  />
+  <LinkCard
+    title="Add a framework"
+    description="Extend Astro with support for React, Svelte, Tailwind and more in our Integrations guide."
+    href="/en/guides/integrations-guide/"
+  />
+  <LinkCard
+    title="Deploy your site"
+    description="Learn how to build and deploy an Astro project to the web in our Deployment guide."
+    href="/en/guides/deploy/"
+  />
+</CardGrid>
diff --git a/src/content/docs/en/install/manual.mdx b/src/content/docs/en/install/manual.mdx
index 188bdc2a6bd17..bb9cfec6f514b 100644
--- a/src/content/docs/en/install/manual.mdx
+++ b/src/content/docs/en/install/manual.mdx
@@ -6,7 +6,7 @@ i18nReady: true
 import Button from '~/components/Button.astro'
 import FileTree from '~/components/FileTree.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import ReadMore from '~/components/ReadMore.astro'
 
 This guide will walk you through the steps to manually install and configure a new Astro project if you prefer not to use [the automatic CLI tool](/en/install/auto/).
 
@@ -151,7 +151,7 @@ export default defineConfig({});
 
 If you want to include [UI framework components](/en/core-concepts/framework-components/) such as React, Svelte, etc. or use other tools such as Tailwind or Partytown in your project, here is where you will [manually import and configure integrations](/en/guides/integrations-guide/).
 
-📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for more information.
+<ReadMore>Read Astro's [API configuration reference](/en/reference/configuration-reference/) for more information.</ReadMore>
 
 ## 6. Add TypeScript support
 
@@ -173,7 +173,7 @@ Finally, create `src/env.d.ts` to let TypeScript know about ambient types availa
 /// <reference types="astro/client" />
 ```
 
-📚 Read Astro's [TypeScript setup guide](/en/guides/typescript/#setup) for more information.
+<ReadMore>Read Astro's [TypeScript setup guide](/en/guides/typescript/#setup) for more information.</ReadMore>
 
 ## 7. Next Steps
 
diff --git a/src/content/docs/en/recipes/i18n.mdx b/src/content/docs/en/recipes/i18n.mdx
index 1f4ec58f9af83..0c4d476f57249 100644
--- a/src/content/docs/en/recipes/i18n.mdx
+++ b/src/content/docs/en/recipes/i18n.mdx
@@ -5,6 +5,7 @@ type: recipe
 i18nReady: true
 ---
 import FileTree from '~/components/FileTree.astro'
+import ReadMore from '~/components/ReadMore.astro'
 import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro'
 
 In this recipe, you will learn how to use content collections and dynamic routing to build your own internationalization (i18n) solution and serve your content in different languages.
@@ -96,7 +97,8 @@ If you prefer the default language to not be visible in the URL unlike other lan
     };
 
     ```
-    📚 Read more about [Content Collections](/en/guides/content-collections/).
+    
+    <ReadMore>Read more about [Content Collections](/en/guides/content-collections/).</ReadMore>
 
 3. Use [dynamic routes](/en/core-concepts/routing/#dynamic-routes) to fetch and render content based on a `lang` and a `slug` parameter.
 
@@ -157,7 +159,7 @@ If you prefer the default language to not be visible in the URL unlike other lan
       </Fragment>
     </StaticSsrTabs>
 
-    📚 Read more about [dynamic routing](/en/core-concepts/routing/#dynamic-routes).
+    <ReadMore>Read more about [dynamic routing](/en/core-concepts/routing/#dynamic-routes).</ReadMore>
 
     :::tip[Date formatting]
     The example above uses the built-in [`toLocaleString()` date-formatting method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) to create a human-readable string from the frontmatter date.
diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
index b546f6f738886..cdce88f89f144 100644
--- a/src/content/docs/en/reference/api-reference.mdx
+++ b/src/content/docs/en/reference/api-reference.mdx
@@ -4,7 +4,7 @@ i18nReady: true
 ---
 import Since from '~/components/Since.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
-
+import ReadMore from '~/components/ReadMore.astro';
 
 ## `Astro` global
 
@@ -129,9 +129,9 @@ import Heading from '../components/Heading.astro';
 <Heading title="My First Post" date="09 Aug 2022" />
 ```
 
-📚 Learn more about how [Markdown and MDX Layouts](/en/guides/markdown-content/#frontmatter-layout) handle props.
+<ReadMore>Learn more about how [Markdown and MDX Layouts](/en/guides/markdown-content/#frontmatter-layout) handle props.</ReadMore>
 
-📚 Learn how to add [TypeScript type definitions for your props](/en/guides/typescript/#component-props).
+<ReadMore>Learn how to add [TypeScript type definitions for your props](/en/guides/typescript/#component-props).</ReadMore>
 
 ### `Astro.params`
 
diff --git a/src/content/docs/en/reference/cli-reference.mdx b/src/content/docs/en/reference/cli-reference.mdx
index a56182684da44..aa4b4fa128b6f 100644
--- a/src/content/docs/en/reference/cli-reference.mdx
+++ b/src/content/docs/en/reference/cli-reference.mdx
@@ -4,7 +4,7 @@ i18nReady: true
 ---
 import Since from '~/components/Since.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import ReadMore from '~/components/ReadMore.astro'
 
 
 You can use the Command-Line Interface (CLI) provided by Astro to develop, build, and preview your project from a terminal window.
@@ -227,7 +227,7 @@ Use these flags to customize the behavior of the command.
 
 The command will watch for any changes in your project, and will report any errors.
 
-📚 Read more about [type checking in Astro](/en/guides/typescript/#type-checking).
+<ReadMore>Read more about [type checking in Astro](/en/guides/typescript/#type-checking).</ReadMore>
 
 ## `astro sync`
 
diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx
index f42c39e25e81f..ca64f20711331 100644
--- a/src/content/docs/en/reference/directives-reference.mdx
+++ b/src/content/docs/en/reference/directives-reference.mdx
@@ -4,6 +4,7 @@ i18nReady: true
 ---
 
 import Since from '~/components/Since.astro';
+import ReadMore from '~/components/ReadMore.astro'
 
 **Template directives** are a special kind of HTML attribute available inside of any Astro component template (`.astro` files), and some can also be used in `.mdx` files.
 
@@ -199,7 +200,7 @@ By default, Astro automatically scopes `<style>` CSS rules to the component. You
 
 You can combine `<style>` and `<style is:global>` together in the same component, to create some global style rules while still scoping most of your component CSS.
 
-📚 See the [Styling & CSS](/en/guides/styling/#global-styles) page for more details about how global styles work.
+<ReadMore>See the [Styling & CSS](/en/guides/styling/#global-styles) page for more details about how global styles work.</ReadMore>
 
 ```astro
 <style is:global>
@@ -238,7 +239,7 @@ The `is:inline` directive is implied whenever any attribute other than `src` is
 </script>
 ```
 
-📚 See how [client-side scripts](/en/guides/client-side-scripts/) work in Astro components.
+<ReadMore>See how [client-side scripts](/en/guides/client-side-scripts/) work in Astro components.</ReadMore>
 
 ### `define:vars`
 
diff --git a/src/content/docs/en/tutorials/add-view-transitions.mdx b/src/content/docs/en/tutorials/add-view-transitions.mdx
index 88e0ca14b7bc4..1fc67d6253b2c 100644
--- a/src/content/docs/en/tutorials/add-view-transitions.mdx
+++ b/src/content/docs/en/tutorials/add-view-transitions.mdx
@@ -10,6 +10,7 @@ import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import Spoiler from '~/components/Spoiler.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import ReadMore from '~/components/ReadMore.astro'
 
 
 **View transitions** are a way to control what happens when visitors navigate between pages on your site. Astro's View Transitions API allows you to add optional navigation features including smooth page transitions and animations, controlling the browser's history stack of visited pages, and preventing full-page refreshes in order to persist some page elements and state while updating the content displayed.
@@ -378,7 +379,7 @@ With view transitions, some scripts may no longer re-run after page navigation l
     ```
     Navigate to any blog post in your browser preview, and you will see the description fade in slower than the rest of the text.
 
-    📚 Read more about the different [transition directives](/en/guides/view-transitions/#transition-directives) and [customizing animations](/en/guides/view-transitions/#customizing-animations).
+    <ReadMore>Read more about the different [transition directives](/en/guides/view-transitions/#transition-directives) and [customizing animations](/en/guides/view-transitions/#customizing-animations).</ReadMore>
 
 ### Force a full browser reload for some links