card.css

Same filename in this branch
  1. 10 core/themes/claro/css/components/card.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
  2. 9 core/themes/claro/css/components/card.css
  3. 8.9.x core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
  4. 8.9.x core/themes/claro/css/components/card.css
  5. 11.x core/profiles/demo_umami/themes/umami/components/card/card.css
  6. 11.x core/themes/claro/css/components/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

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. .umami-card__content {
  8. display: grid;
  9. gap: 1.2rem;
  10. }
  11. .umami-card__label-items {
  12. display: flex;
  13. flex-wrap: wrap;
  14. gap: 0.1rem;
  15. margin: 0;
  16. color: #5f635d;
  17. font-size: 0.889rem;
  18. }
  19. .umami-card__read-more {
  20. justify-self: start;
  21. }
  22. .umami-card__title {
  23. flex-grow: 1;
  24. margin: 0;
  25. text-decoration: none;
  26. color: #000;
  27. font-size: 1.424rem;
  28. font-weight: 400;
  29. }
  30. .umami-card__title a {
  31. text-decoration: none;
  32. color: #000;
  33. background-color: inherit;
  34. }
  35. .umami-card__title a:hover,
  36. .umami-card__title a:focus {
  37. text-decoration: underline;
  38. color: #000;
  39. }
  40. .umami-card__wrapper {
  41. display: grid;
  42. gap: 1rem;
  43. grid-template-rows: 1fr auto auto;
  44. height: 100%;
  45. }
  46. .umami-card--alt .umami-card__wrapper {
  47. grid-template-rows: auto 1fr auto;
  48. }
  49. .umami-card .field--name-field-media-image {
  50. line-height: 0;
  51. }
  52. .umami-card .field--name-field-media-image img {
  53. display: block;
  54. width: 100%;
  55. }

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