diff --git a/src/components/organisms/ArticleCard/ArticleCard.css b/src/components/organisms/ArticleCard/ArticleCard.css
index e2b521d7..1af55d38 100644
--- a/src/components/organisms/ArticleCard/ArticleCard.css
+++ b/src/components/organisms/ArticleCard/ArticleCard.css
@@ -25,7 +25,8 @@
     height 0.2s ease-in-out;
 }
 
-.card-container:hover .text-container {
+.card-container:hover .text-container,
+.card-container .text-container.show {
   box-sizing: border-box;
   height: 100%;
   padding-top: 30%;
@@ -37,7 +38,10 @@
   transition: opacity 0.2s ease-in-out;
 }
 
-.card-container:hover .subtitle-container {
+.card-container:hover .subtitle-container,
+.card-container .text-container.show .subtitle-container {
   margin-top: 2em;
   opacity: 1;
 }
+
+/*# sourceMappingURL=ArticleCard.css.map */
diff --git a/src/components/organisms/ArticleCard/ArticleCard.css.map b/src/components/organisms/ArticleCard/ArticleCard.css.map
new file mode 100644
index 00000000..32f24df7
--- /dev/null
+++ b/src/components/organisms/ArticleCard/ArticleCard.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["ArticleCard.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;;AAIJ;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA","file":"ArticleCard.css"}
\ No newline at end of file
diff --git a/src/components/organisms/ArticleCard/ArticleCard.js b/src/components/organisms/ArticleCard/ArticleCard.js
index a9353846..a8c8dab7 100644
--- a/src/components/organisms/ArticleCard/ArticleCard.js
+++ b/src/components/organisms/ArticleCard/ArticleCard.js
@@ -16,7 +16,7 @@ template.innerHTML = `
 `;
 
 class ArticleCard extends HTMLElement {
-  static observedAttributes = [];
+  static observedAttributes = ['show'];
 
   constructor() {
     // Always call super first in constructor
@@ -43,6 +43,19 @@ class ArticleCard extends HTMLElement {
     this._wrapWithLink();
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'show': {
+        const textContainer = this.shadowRoot.querySelector('.text-container');
+        if (newValue !== null) {
+          textContainer?.classList.add('show');
+        } else {
+          textContainer?.classList.remove('show');
+        }
+      }
+    }
+  }
+
   /**
    * Wraps the .card-container element in an 'a' element with an href attribute.
    */
diff --git a/src/components/organisms/ArticleCard/ArticleCard.scss b/src/components/organisms/ArticleCard/ArticleCard.scss
new file mode 100644
index 00000000..5797d7e8
--- /dev/null
+++ b/src/components/organisms/ArticleCard/ArticleCard.scss
@@ -0,0 +1,47 @@
+.img-placeholder {
+  width: 100%;
+  height: 400px;
+  background-color: #d3d3d3;
+}
+
+.card-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.text-container {
+  position: absolute;
+  box-sizing: border-box;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  height: 40%;
+  bottom: 0;
+  left: 0;
+  transition:
+    padding-top 0.2s,
+    height 0.2s ease-in-out;
+}
+
+.card-container:hover .text-container,
+.card-container .text-container.show {
+  box-sizing: border-box;
+  height: 100%;
+  padding-top: 30%;
+}
+
+.subtitle-container {
+  margin-top: 2em;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.card-container:hover,
+.card-container .text-container.show {
+  .subtitle-container {
+    margin-top: 2em;
+    opacity: 1;
+  }
+}
diff --git a/src/stories/articlecard.stories.js b/src/stories/articlecard.stories.js
index 8545c0b0..98760b09 100644
--- a/src/stories/articlecard.stories.js
+++ b/src/stories/articlecard.stories.js
@@ -26,6 +26,10 @@ export default {
       description: 'The subtitle of the article. Custom markdown is supported.',
     },
     color: COMMON_STORY_ARGS.bootstrapColor,
+    show: {
+      control: { type: 'boolean' },
+      description: 'Toggle to show or hide the article card title text.',
+    },
   },
   args: {
     src: 'https://placehold.co/300x400',
@@ -36,6 +40,7 @@ export default {
     color: 'primary',
     href: 'https://www.example.com',
     target: '_blank',
+    show: false,
   },
 };
 
@@ -57,6 +62,9 @@ function _createArticleCard(args) {
   articleCardElt1.setAttribute('color', args.color);
   articleCardElt1.setAttribute('href', args.href);
   articleCardElt1.setAttribute('target', args.target);
+  if (args.show) {
+    articleCardElt1.setAttribute('show', 'show');
+  }
   if (_containsHTMLTags(args.title)) {
     const title = _createElementFromHTML(args.title);
     title.slot = 'title';