feat(cardstack): add custom id prop and bind id attribute on Card.vue…

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">

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') }}

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>

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 {