diff --git a/adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts b/adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts
index 3642e813c6b..ebd74453da1 100644
--- a/adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts
+++ b/adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts
@@ -18,6 +18,7 @@ interface DocsCardToken extends Tokens.Generic {
href?: string;
imgSrc?: string;
iconImgSrc?: string; // Need image since icons are custom
+ titleInline?: boolean;
tokens: Token[];
}
@@ -30,6 +31,7 @@ const linkRule = /link="([^"]*)"/;
const hrefRule = /href="([^"]*)"/;
const imgSrcRule = /imgSrc="([^"]*)"/;
const iconImgSrcRule = /iconImgSrc="([^"]*)"/;
+const titleInlineRule = /(?:^|\s)titleInline(?=\s|$|=)/;
export const docsCardExtension = {
name: 'docs-card',
@@ -47,6 +49,7 @@ export const docsCardExtension = {
const href = hrefRule.exec(attr);
const imgSrc = imgSrcRule.exec(attr);
const iconImgSrc = iconImgSrcRule.exec(attr);
+ const titleInline = titleInlineRule.test(attr);
const body = match[2].trim();
@@ -59,6 +62,7 @@ export const docsCardExtension = {
link: link ? link[1] : undefined,
imgSrc: imgSrc ? imgSrc[1] : undefined,
iconImgSrc: iconImgSrc ? iconImgSrc[1] : undefined,
+ titleInline,
tokens: [],
};
this.lexer.blockTokens(token.body, token.tokens);
@@ -79,12 +83,14 @@ function getStandardCard(renderer: AdevDocsRenderer, token: DocsCardToken) {
// We need to read svg content, instead of renering svg with `img`,
// cause we would like to use CSS variables to support dark and light mode.
const icon = loadWorkspaceRelativeFile(token.iconImgSrc);
+ const header = token.titleInline
+ ? ``
+ : `${icon}${token.title}
`;
return `
- ${icon}
-
${token.title}
+ ${header}
${renderer.parser.parse(token.tokens)}
${token.link ? token.link : 'Learn more'}
diff --git a/adev/shared-docs/styles/docs/_card.scss b/adev/shared-docs/styles/docs/_card.scss
index bed89f699bc..dedda443844 100644
--- a/adev/shared-docs/styles/docs/_card.scss
+++ b/adev/shared-docs/styles/docs/_card.scss
@@ -159,6 +159,21 @@
margin-block: 1.5rem;
}
+ .docs-card-header-inline {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ svg {
+ margin-block-end: 0;
+ flex-shrink: 0;
+ }
+
+ h3 {
+ margin-block: 0;
+ }
+ }
+
&.docs-card-with-svg {
padding: 0;
diff --git a/adev/src/assets/icons/playground.svg b/adev/src/assets/icons/playground.svg
new file mode 100644
index 00000000000..c9d54a3ed75
--- /dev/null
+++ b/adev/src/assets/icons/playground.svg
@@ -0,0 +1,3 @@
+
diff --git a/adev/src/content/introduction/BUILD.bazel b/adev/src/content/introduction/BUILD.bazel
index f09f3aeeee8..5f881f654b7 100644
--- a/adev/src/content/introduction/BUILD.bazel
+++ b/adev/src/content/introduction/BUILD.bazel
@@ -15,6 +15,7 @@ generate_guides(
"//adev/src/assets/icons:forms.svg",
"//adev/src/assets/icons:language-service.svg",
"//adev/src/assets/icons:ng-update.svg",
+ "//adev/src/assets/icons:playground.svg",
"//adev/src/assets/icons:routing.svg",
"//adev/src/assets/icons:signals.svg",
"//adev/src/assets/icons:ssr.svg",
diff --git a/adev/src/content/introduction/installation.md b/adev/src/content/introduction/installation.md
index 1cfa843b65e..a6538b3e2c4 100644
--- a/adev/src/content/introduction/installation.md
+++ b/adev/src/content/introduction/installation.md
@@ -7,11 +7,9 @@ Get started with Angular quickly with online starters or locally with your termi
If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
-
-
- The fastest way to play with an Angular app. No setup required.
-
-
+
+The fastest way to play with an Angular app. No setup required.
+
## Set up a new project locally