Update styles given feedback

CityOfDetroit · Jun 17, 2024 · 49e72e7 · 49e72e7
1 parent 2f74215
commit 49e72e7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/organisms/ArticleCard/ArticleCard.css b/src/components/organisms/ArticleCard/ArticleCard.css
@@ -12,9 +12,12 @@
 .text-container {
   position: absolute;
   box-sizing: border-box;
-  padding: 0.5em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
   width: 100%;
-  height: 20%;
+  height: 40%;
   bottom: 0;
   left: 0;
   transition:
@@ -25,7 +28,7 @@
 .card-container:hover .text-container {
   box-sizing: border-box;
   height: 100%;
-  padding-top: 40%;
+  padding-top: 30%;
 }
 
 .subtitle-container {

diff --git a/src/stories/articlecard.stories.js b/src/stories/articlecard.stories.js
@@ -30,9 +30,9 @@ export default {
   args: {
     src: 'https://placehold.co/300x400',
     title:
-      '<h3 class="text-center text-light" style="text-transform: uppercase; font-weight: 900;">The Great Money Transfer</h3>',
+      '<h2 class="text-center text-light" style="text-transform: uppercase; font-weight: 900; font-size: 42px;">The Great Money Transfer</h2>',
     subTitle:
-      '<h5 class="text-center text-success" style="text-transform: uppercase; font-weight: 900;">The Power of Generational Wealth</h4>',
+      '<h3 class="text-center text-success" style="text-transform: uppercase; font-weight: 700; font-size: 26px; line-height: 116%;">The Power of Generational Wealth</h3>',
     color: 'primary',
     href: 'https://www.example.com',
     target: '_blank',
@@ -62,7 +62,7 @@ function _createArticleCard(args) {
     title.slot = 'title';
     articleCardElt1.appendChild(title);
   } else {
-    const title = document.createElement('h3');
+    const title = document.createElement('h2');
     title.innerText = args.title;
     title.classList.add('text-center');
     title.slot = 'title';
@@ -74,7 +74,7 @@ function _createArticleCard(args) {
     subTitle.slot = 'subtitle';
     articleCardElt1.appendChild(subTitle);
   } else {
-    const subTitle = document.createElement('h4');
+    const subTitle = document.createElement('h3');
     subTitle.innerText = args.subTitle;
     subTitle.classList.add('text-center');
     subTitle.slot = 'subtitle';