From a9edd6e28b93655793da97abd7db18755f2f7d29 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Thu, 13 Aug 2020 10:50:45 -0400
Subject: [PATCH] additional info on card markup file and css for card base
padding
---
css/styles.css | 8 ++++----
source/_patterns/04-components/card/_card.scss | 4 ++--
.../04-components/card/card--feature/card--feature.md | 6 ++++--
source/_patterns/04-components/card/card.md | 4 +++-
4 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 87ed6ef3..11995a63 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2076,7 +2076,7 @@ ul.toolbar-menu {
display: flex;
flex-direction: column;
flex-grow: 1;
- padding: 0 1.5rem 0; }
+ padding: 1rem; }
.card__body p:last-child {
margin-bottom: 0; }
@@ -2098,7 +2098,7 @@ ul.toolbar-menu {
.card__footer {
margin-top: auto;
- padding: 0 0 1.5rem; }
+ padding: 0 0 1rem; }
.card__footer > div {
margin-bottom: 1rem; }
.card__footer > div:last-child {
@@ -2108,7 +2108,7 @@ ul.toolbar-menu {
text-align: right; }
.card--feature .card__body {
- padding-top: 1.5rem; }
+ padding-top: 1rem; }
.card--feature .card__media {
flex-grow: 1;
@@ -2119,7 +2119,7 @@ ul.toolbar-menu {
flex-direction: row; }
.card--feature .card__body {
max-width: 600px;
- padding: 1.5rem 2vw 0; }
+ padding: 1rem 2vw 0; }
.card--feature .card__media {
order: initial; } }
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 0d511854..0ced2d10 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -5,7 +5,7 @@ $card-accent-border-color: gesso-color(ui, generic, accent) !default;
$card-link-color: gesso-color(text, on-light) !default;
$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
$card-meta-color: gesso-color(ui, generic, text-dark) !default;
-$card-padding: rem(gesso-spacing(md)) !default;
+$card-padding: rem(gesso-spacing(sm)) !default;
.card {
display: flex;
@@ -51,7 +51,7 @@ $card-padding: rem(gesso-spacing(md)) !default;
display: flex;
flex-direction: column;
flex-grow: 1;
- padding: 0 $card-padding 0;
+ padding: $card-padding;
p:last-child {
margin-bottom: 0;
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.md b/source/_patterns/04-components/card/card--feature/card--feature.md
index 53f2f3b1..7ff33156 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.md
+++ b/source/_patterns/04-components/card/card--feature/card--feature.md
@@ -5,10 +5,12 @@ title: Feature Card
__Variables:__
* modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
+* title: [string] Title of the featured card.
* url: [string] URL of the card.
* date: [string] Date of the card.
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
-* media: [string] URL for the background-image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url for the fallback image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
* content: [string] Content of the card.
diff --git a/source/_patterns/04-components/card/card.md b/source/_patterns/04-components/card/card.md
index 3165f277..94716b10 100644
--- a/source/_patterns/04-components/card/card.md
+++ b/source/_patterns/04-components/card/card.md
@@ -14,7 +14,9 @@ __Variables:__
* date: [string] Date of the card.
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
-* media: [string] URL for the image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url for the fallback image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
* content: [string] Content of the card.
* social_media: [array] Social media icons that can be included to card
* text
--
GitLab