visually indicate draft status

src/_includes/partials/card-blog.njk

@@ -6,7 +6,7 @@
   <{{ headingLevel }} slot="headline" class="text-step-2">
     <a href="{{ item.url | url }}">{{ item.data.title }}</a>
   </{{ headingLevel }}>
-  <span slot="date"> {% include "partials/date.njk" %} </span>
+  <span slot="date">{%- if item.data.draft -%}<span class="button" data-small-button data-button-variant='tertiary'>draft</span>{%- endif %} {% include "partials/date.njk" %}</span>
   {% if showTags and item.data.tags.length > 1 %}
     <div slot="tag" webc:nokeep>
       {% for tag in item.data.tags %}

src/_layouts/post.njk

@@ -13,6 +13,10 @@ schema: BlogPosting
     {% endif %}
 
     <p class="meta | cluster gutter-xs-s">
+      <!-- draft status -->
+      {%- if draft -%}<span class="button" data-small-button data-button-variant="tertiary"
+        >draft</span
+      >{%- endif %}
       <!-- date -->
       {% set definedDate = date %} {% include "partials/date.njk" %}
       {%