From 6a569f904be59d0000e65f1105e65871cd04b9a9 Mon Sep 17 00:00:00 2001 From: reshmai Date: Thu, 14 Dec 2023 11:34:13 -0600 Subject: [PATCH] Tci 1129 Created new branch and updated code in card.css (#864) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * Added media css for cta variant (#856) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color --------- Co-authored-by: Reshma Dhane * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Adding images to card (#857) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left --------- Co-authored-by: Reshma Dhane * TCI-1129 Changes into card.css for media left in card * Tci 1129 add images to card (#858) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card --------- Co-authored-by: Reshma Dhane * TCI-1185: Correct button styling on hero alt background (#859) * Image size is fixed for Image in card * Tci 1129 add images to card (#860) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card * Image size is fixed for Image in card --------- Co-authored-by: Reshma Dhane * TCI-1129 Heading height issue fixed. * Tci 1129 add images to card (#861) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card * Image size is fixed for Image in card * TCI-1129 Heading height issue fixed. --------- Co-authored-by: Reshma Dhane * TCI-1129 Courtyard Image in card css for media top changed * TCI-1129 revert code from card media left * TCI-1129 css change --------- Co-authored-by: Reshma Dhane Co-authored-by: Mel Wong <46764557+melwong-jcc@users.noreply.github.com> --- source/_patterns/02-molecules/card/_card.scss | 57 ++++++++++++------- .../cards/cards~media-two-60-40.yml | 25 ++++++++ 2 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 source/_patterns/03-organisms/cards/cards~media-two-60-40.yml diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss index 6663e606d..0a793cc3c 100644 --- a/source/_patterns/02-molecules/card/_card.scss +++ b/source/_patterns/02-molecules/card/_card.scss @@ -498,32 +498,51 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme); } } -.usa-card__container.type-image { - @include u-padding(0); - - .usa-card__media { - line-height: 0; - @include u-margin-right(2); - - img { - object-fit: fill; +.usa-card--media-left, .usa-card--media-top { + .usa-card__container.type-image { + @include u-padding(0); + .usa-card__body { + @include u-padding-left(0); + @include u-padding-right(0); } } +} - .usa-card__content { - @include u-padding(3); - } +.usa-card--media-top { + .usa-card__container.type-image { + .usa-card__header { + height: unset; + margin-top: 21rem; + .usa-card__heading { + @include u-color(map-get($_config, title-color)); + position: unset; + white-space: normal; + } + } + .usa-card__media{ + line-height: 0; + @include u-margin-right(1); + img{ + object-fit: cover; + height: 20rem; + display: flex; + } + } + } + .usa-card__content{ + @include u-padding(3); + } } .jcc-cards--1-cols { - .usa-card__container.type-image { - .jcc-card--overlay-color-none { - aspect-ratio: 16/9; - overflow: hidden; - border-radius: initial; - img { - object-fit: fill; + .usa-card--media-left{ + .usa-card__container.type-image { + .jcc-card--overlay-color-none { + aspect-ratio: var(--frame-h,16)/var(--frame-v,9); + overflow: hidden; + border-radius: initial; } } } } + diff --git a/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml new file mode 100644 index 000000000..542e057d4 --- /dev/null +++ b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml @@ -0,0 +1,25 @@ +cards: + heading: + title: "Cards" + lead: "

Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis.

" + num_cols: "2-60-40" + items: + - style: "media-top" + title: "Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare " + body: "

Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.

" + media: + src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg" + alt: "green" + link: + url: "#" + text: "Luctus nunc quam" + - style: "media-top" + title: "Posuere et ornare" + body: "

Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.

" + media: + src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg" + alt: "green" + link: + url: "#" + text: "Luctus nunc quam" +