card.css

Same filename in this branch
  1. 8.9.x 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. 10 core/profiles/demo_umami/themes/umami/components/card/card.css
  4. 10 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

This file is used to style the 'Card' view mode.

File

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

View source
  1. /**
  2. * @file
  3. * This file is used to style the 'Card' view mode.
  4. */
  5. .view-mode-card {
  6. display: flex;
  7. flex-direction: column;
  8. width: 100%;
  9. padding: 1rem;
  10. border: 1px solid #fcece7;
  11. }
  12. .view-mode-card .node__title {
  13. flex-grow: 1;
  14. }
  15. .view-mode-card .field--name-title {
  16. text-decoration: none;
  17. color: #000;
  18. font-size: 1.424rem;
  19. font-weight: 400;
  20. }
  21. .view-mode-card .node__link {
  22. text-decoration: none;
  23. color: #000;
  24. background-color: inherit;
  25. }
  26. .view-mode-card .node__link:focus,
  27. .view-mode-card .node__link:hover {
  28. text-decoration: underline;
  29. color: #000;
  30. }
  31. /* Need to fix IE11 cards height issue */
  32. .view-mode-card .node__content {
  33. flex-shrink: 0;
  34. }
  35. .view-mode-card .field--name-field-media-image img {
  36. display: block;
  37. width: 100%;
  38. margin-bottom: 1.2em;
  39. }
  40. .view-mode-card .label-items {
  41. color: #5f635d;
  42. font-size: 0.889rem;
  43. }

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