diff --git a/src/patterns/04-components/card/card--node/card--node.yml b/src/patterns/04-components/card/card--node/card--node.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c00175f04f78c9ee3bbf97da5cba0ba2689084e6
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/card--node.yml
@@ -0,0 +1,225 @@
+---
+node_webpage:
+  url: '#'
+  bundle: 'web-page'
+  header:
+    title: 'Card Title'
+  content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+node_webpage_media:
+  url: '#'
+  bundle: 'web-page'
+  media:
+    sources:
+      - srcset: '/images/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '/images/president_xlarge.jpg'
+    alt: 'Alternative text'
+    type: 'image'
+  header:
+    title: 'This is a title overlay, inside of card header sent to the card media section'
+  content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_blog:
+  url: '#'
+  bundle: 'blog'
+  header:
+    title: 'Blog with no media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+    author:
+      name: 'Blog Author'
+      link: '#'
+  content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_blog_media:
+  url: '#'
+  bundle: 'blog'
+  media:
+    media:
+      sources:
+        - srcset: '/images/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '/images/president_xlarge.jpg'
+      alt: 'Alternative text'
+    type: 'image'
+  header:
+    title: 'Blog with media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+    author:
+      name: 'Blog Author'
+      link: '#'
+  content: '<p class="layout uw-contained-width--wide">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_event:
+  url: '#'
+  bundle: 'event'
+  header:
+    title: 'Event without media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+  content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_event_media:
+  url: '#'
+  bundle: 'event'
+  media:
+    media:
+      sources:
+        - srcset: '/images/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '/images/president_xlarge.jpg'
+      alt: 'Alternative text'
+    type: 'image'
+  header:
+    title: 'Event with media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+  content: '<p class="layout uw-contained-width--wide">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_news:
+  url: '#'
+  bundle: 'news-item'
+  header:
+    title: 'News without media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+    author:
+      name: 'News Author'
+      link: '#'
+  content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+node_news_media:
+  url: '#'
+  bundle: 'news-item'
+  media:
+    sources:
+      - srcset: '/images/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '/images/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '/images/president_xlarge.jpg'
+    alt: 'Alternative text'
+    type: 'image'
+  header:
+    title: 'News with media'
+    date:
+      0: 'Wednesday, December 7, 2021'
+    author:
+      name: 'News Author'
+      link: '#'
+  content: '<p class="layout uw-contained-width--wide">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  tags:
+    - url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    - url: '#'
+      title: 'Tag 3'
+      type: 'simple'