From 8bdba0598fa9a62df7f5c0e64168d9ae9d871192 Mon Sep 17 00:00:00 2001
From: Arshin Sikka <e1186295@u.nus.edu>
Date: Fri, 11 Jul 2025 23:12:20 +0530
Subject: [PATCH 1/4] feat(cardstack): add custom id prop and bind id attribute
 on Card.vue (#2691)

---
 packages/vue-components/src/cardstack/Card.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/vue-components/src/cardstack/Card.vue b/packages/vue-components/src/cardstack/Card.vue
index 79f2229411..d3d55a1f9c 100644
--- a/packages/vue-components/src/cardstack/Card.vue
+++ b/packages/vue-components/src/cardstack/Card.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-show="!computeDisabled" :class="`col-md-${computedBlock}`">
+  <div
+    v-show="!computeDisabled"
+    :class="`col-md-${computedBlock}`"
+    :id="id"
+  >
     <div class="card">
       <div class="card-body article-container" :style="computedWidth">
         <div
@@ -49,6 +53,10 @@ export default {
       type: String,
       default: '',
     },
+      id: {
+        type: String,
+        default: '',
+      },
   },
   data() {
     return {

From f9748539349ea24444d5e4b89ac6422262ba1b7a Mon Sep 17 00:00:00 2001
From: Arshin Sikka <e1186295@u.nus.edu>
Date: Fri, 11 Jul 2025 23:28:28 +0530
Subject: [PATCH 2/4] docs(card): document custom id usage for Card component
 (#2691)

---
 docs/userGuide/components/presentation.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md
index 026f480fa5..69ae4ad1da 100644
--- a/docs/userGuide/components/presentation.md
+++ b/docs/userGuide/components/presentation.md
@@ -45,6 +45,23 @@ For more information, please refer to this [section]({{baseUrl}}/userGuide/using
 
 <br>
 
+## Card Component
+
+The `<Card>` component is used to present content in a styled card layout, often within a `<CardStack>` for grid-based alignment.
+
+You can now assign a custom `id` to a `<Card>` element. This helps:
+- Link directly to the card via anchor tags (`#card-id`)
+- Target cards using custom CSS or JavaScript
+
+### Example
+
+```html
+<Card id="overview-card">
+  <template #header>Overview</template>
+  This is the content of a card with a custom ID.
+</Card>
+
+
 # Relevant Tips & Tricks
 
 <panel header="Indent components">

From 5199d440aad4d88b5623d4734926dbf17bacbefb Mon Sep 17 00:00:00 2001
From: Arshin Sikka <e1186295@u.nus.edu>
Date: Fri, 11 Jul 2025 23:33:04 +0530
Subject: [PATCH 3/4] test(card): add test site example for custom card id
 support (#2691)

---
 packages/cli/test/functional/test_site/index.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/cli/test/functional/test_site/index.md b/packages/cli/test/functional/test_site/index.md
index 0c3eff0c2f..c7bfece319 100644
--- a/packages/cli/test/functional/test_site/index.md
+++ b/packages/cli/test/functional/test_site/index.md
@@ -356,3 +356,12 @@ and **this**.
 <code>{{ code elements should automatically be assigned v-pre }}</code>
 
 {% endraw %}
+
+<hr>
+
+<header><h2>Card ID Test</h2></header>
+
+<Card id="test-card-id">
+  <template #header>Test Card Header</template>
+  This card has a custom <code>id="test-card-id"</code> and should be accessible via <a href="#test-card-id">this anchor link</a>.
+</Card>

From df113cdb702487774fe689847d793551164ca979 Mon Sep 17 00:00:00 2001
From: Arshin Sikka <e1186295@u.nus.edu>
Date: Fri, 11 Jul 2025 23:46:24 +0530
Subject: [PATCH 4/4] docs: add custom CSS usage and warnings to user guide
 (#2705)

---
 docs/userGuide/usingHtmlJavaScriptCss.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md
index abf13c316c..03d933abbb 100644
--- a/docs/userGuide/usingHtmlJavaScriptCss.md
+++ b/docs/userGuide/usingHtmlJavaScriptCss.md
@@ -148,5 +148,26 @@ const myChart = new Chart(ctx, {
 </variable>
 </include>
 
+## Using Custom CSS in MarkBind
+
+You can apply your own custom CSS styles to customize how your site looks.
+
+There are two common ways to add custom CSS in MarkBind:
+
+### 1. Add a site-wide custom stylesheet
+
+To apply styles across your whole site, create a file called `styles.css` (or similar), and add it to your `site.json` under `head`:
+
+```json
+"head": [
+  {
+    "tagName": "link",
+    "attributes": {
+      "rel": "stylesheet",
+      "href": "/styles.css"
+    }
+  }
+]
+
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('components/advanced', 'tweakingThePageStructure') }}