card.css

.umami-card {
  width: 100%;
  padding: 1rem;
  border: 1px solid #fcece7;
  background-color: #fff;
}

.umami-card__content {
  display: grid;
  gap: 1.2rem;
}

.umami-card__label-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin: 0;
  color: #5f635d;
  font-size: 0.889rem;
}

.umami-card__read-more {
  justify-self: start;
}

.umami-card__title {
  flex-grow: 1;
  margin: 0;
  text-decoration: none;
  color: #000;
  font-size: 1.424rem;
  font-weight: 400;
}

.umami-card__title a {
  text-decoration: none;
  color: #000;
  background-color: inherit;
}

.umami-card__title a:hover,
.umami-card__title a:focus {
  text-decoration: underline;
  color: #000;
}

.umami-card__wrapper {
  display: grid;
  gap: 1rem;
  grid-template-rows: 1fr auto auto;
  height: 100%;
}

.umami-card--alt .umami-card__wrapper {
  grid-template-rows: auto 1fr auto;
}

.umami-card .field--name-field-media-image {
  line-height: 0;
}

.umami-card .field--name-field-media-image img {
  display: block;
  width: 100%;
}

File

View on git.drupalcode.org

core/profiles/demo_umami/themes/umami/components/card/card.css

View source 
  1. .umami-card {

  2.   width: 100%;

  3.   padding: 1rem;

  4.   border: 1px solid #fcece7;

  5.   background-color: #fff;

  6. }

  7. 

  8. .umami-card__content {

  9.   display: grid;

  10.   gap: 1.2rem;

  11. }

  12. 

  13. .umami-card__label-items {

  14.   display: flex;

  15.   flex-wrap: wrap;

  16.   gap: 0.1rem;

  17.   margin: 0;

  18.   color: #5f635d;

  19.   font-size: 0.889rem;

  20. }

  21. 

  22. .umami-card__read-more {

  23.   justify-self: start;

  24. }

  25. 

  26. .umami-card__title {

  27.   flex-grow: 1;

  28.   margin: 0;

  29.   text-decoration: none;

  30.   color: #000;

  31.   font-size: 1.424rem;

  32.   font-weight: 400;

  33. }

  34. 

  35. .umami-card__title a {

  36.   text-decoration: none;

  37.   color: #000;

  38.   background-color: inherit;

  39. }

  40. 

  41. .umami-card__title a:hover,

  42. .umami-card__title a:focus {

  43.   text-decoration: underline;

  44.   color: #000;

  45. }

  46. 

  47. .umami-card__wrapper {

  48.   display: grid;

  49.   gap: 1rem;

  50.   grid-template-rows: 1fr auto auto;

  51.   height: 100%;

  52. }

  53. 

  54. .umami-card--alt .umami-card__wrapper {

  55.   grid-template-rows: auto 1fr auto;

  56. }

  57. 

  58. .umami-card .field--name-field-media-image {

  59.   line-height: 0;

  60. }

  61. 

  62. .umami-card .field--name-field-media-image img {

  63.   display: block;

  64.   width: 100%;

  65. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.