more styling

src/_data/release-notes.yml

@@ -3,19 +3,20 @@
 notes: 
   - title: Segment Extensions General Availability
     slug: segment-extensions-ga
-    description: "Segment Extensions, including dbt and Git Sync, is generally available. Extensions provides third-party integrations that add an automated experience with your existing tools, like dbt labs for syncing models or Git repositories for managing versioning for Segment Workspace changes. dbt Extension is available to all tiers, while Git Sync is available for Team and Business plans. For more information, see Segment's Extensions documentation."
-    date: "August 16, 2024"
+    description: "Segment Extensions, including dbt and Git Sync, is generally available. <br><br> Extensions provides third-party integrations that add an automated experience with your existing tools, like dbt labs for syncing models or Git repositories for managing versioning for Segment Workspace changes. dbt Extension is available to all tiers, while Git Sync is available for Team and Business plans. <br><br> For more information, see Segment's [Extensions documentation](/docs/segment-app/extensions/)."
+    date: 08-16-2024
     product-area: 
       - segment app 
     release-stage: ga
     plan: 
         - free
         - team
         - business
+    read-more: "/docs/segment-app/extensions/"
   - title: Linked Audiences and Data Graph General Availability
     slug: segment-linked-and-data-graph-ga
     description: "Segment's Linked Audiences and Data Graph are now Generally Available for Snowflake & Databricks. Linked Audiences empowers marketers to effortlessly create targeted audiences by combining behavioral data from the Segment Profile and warehouse entity data within a self-serve, no-code interface. This tool accelerates audience creation, enabling precise targeting, enhanced customer personalization, and optimized marketing spend without the need for constant data team support. The Data Graph acts as a semantic layer that allows businesses to define relationships between entity datasets in the warehouse — such as accounts, subscriptions, households, and products — with the Segment Profile. The Data Graph makes these relational datasets easily accessible to business teams for targeted and personalized customer engagements."
-    date: "August 23, 2024"
+    date: 08-23-2024
     product-area: 
       - twilio engage 
     release-stage: ga

src/_sass/components/_release-note-card.scss

@@ -28,16 +28,19 @@
     font-weight: 600;
     width: fit-content(40%);
     text-wrap: balance;
-    color: color(gray-900)
+    color: color(gray-900);
+    margin-bottom: 20px;
   }
 
-  &--title {
-    padding: 5px;
+  &--badges {
+    padding-top: 10px;
   }
 
   &--content {
     width: 100%;
-    text-align: center;
+    text-align: right;
+    padding-top: 10px;
+    padding-bottom: 10px;
 
     @include breakpoint(medium up)  {
       text-align: left;

src/release-notes/test.md

@@ -7,20 +7,22 @@ hide_toc: true
 {% for note in notes reversed %}
 <article class="release-note-card">
 <div class="release-note-card--box">
-  <span class="release-note-card--note-header">{{ note.title }}</span>
-  <span class="badge badge--purple">{{ note.release-stage }}</span>
-  {% assign plans = note.plan %}
-    {% for plan in plans %}
-    <span class="badge badge">{{ plan }}</span>
-    {% endfor %}
-  {% assign product-area = note.product-area %}
-    {% for item in product-area %}
-    <span class="badge badge--success">{{ item }}</span>
-    {% endfor %}
+  <span class="release-note-card--note-header">{{ note.title }}</span><br>
+  <div class="release-note-card--badges">
+    <span class="badge badge--purple">{{ note.release-stage }}</span>
+    {% assign plans = note.plan %}
+      {% for plan in plans %}
+      <span class="badge badge">{{ plan }}</span>
+      {% endfor %}
+    {% assign product-area = note.product-area %}
+      {% for item in product-area %}
+      <span class="badge badge--success">{{ item }}</span>
+      {% endfor %}
+  </div>
 <div class="release-note-card--content">
   <main>
-    <p>{{ note.description }}</p>
-    <small class="release-note-card--date">Released {{ note.date }}</small>
+    <p>{{ note.description | markdownify }}</p>
+    <p class="release-note-card--date">Released {{ note.date }}</p>
   </main>
 </div>
 </div>