From d49196444bbb5a0c0d1908c70b98f6c5607049e1 Mon Sep 17 00:00:00 2001 From: Maitra Khatri Date: Sun, 30 Jan 2022 23:02:44 +0530 Subject: [PATCH] feat: card DONE --- card/card.css | 94 ++++++++++++++++++++++ card/card.html | 159 ++++++++++++++++++++++++++++++++++++++ card/close_black_24dp.svg | 1 + 3 files changed, 254 insertions(+) create mode 100644 card/card.css create mode 100644 card/card.html create mode 100644 card/close_black_24dp.svg diff --git a/card/card.css b/card/card.css new file mode 100644 index 0000000..d5301bf --- /dev/null +++ b/card/card.css @@ -0,0 +1,94 @@ +@import url(../style.css); +@import url(../badge/badge.css); + +.card { + display: flex; + flex-direction: column; + width: 15rem; + border: 1px solid black; + border-radius: .25rem; + background-color: var(--bg-cus); +} + +.card-title { + border-bottom: 1px solid black; + padding: 0.5rem; + font-weight: bold; + +} + +.card-body { + padding: 0.5rem; +} + +.card-title.dismiss { + display: flex; + align-items: center; +} + +.card-title.dismiss img { + width: 2rem; + margin-left: auto; +} + +.card-title.dismiss img:hover { + cursor: pointer; +} + +.card-with-image { + width: fit-content; +} + +.card-img img { + border-radius: .25rem; +} + +.card-with-image .card-title { + border: none; +} + +.horizontal { + display: flex; + flex-flow: row; +} + +.card-with-image.horizontal { + height: 150px; + width: 30rem; +} + +.card-side-body { + display: flex; + flex-direction: column; +} + +.vertical { + width: min-content; +} + +.text-overlay { + width: min-content; +} + +.text-overlay .card-title { + padding: 0; + margin: 0; +} + +.text-overlay .card-title { + position: relative; +} + +.text-overlay .card-overlay-title { + position: absolute; + bottom: 1rem; + padding: 0.5rem; +} + +.card-with-badge { + position: relative; +} + +.shadow { + filter: drop-shadow(0 0 0.25rem black); +} \ No newline at end of file diff --git a/card/card.html b/card/card.html new file mode 100644 index 0000000..c8071e4 --- /dev/null +++ b/card/card.html @@ -0,0 +1,159 @@ + + + + + + + card + + + + + +
+ +
+ Text only Card +
+ +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+ +
+ +
+ +
+ Card with Badge +
+ +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+ + 5 + +
+ +
+ +
+ Card with dismiss + close button +
+ +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+ +
+ + +
+ +
+ card image +
+ +
+ Card with Image +
+ +
+ Lorem ipsum dolor sit amet. +
+ +
+ +
+ +
+ card image +
+ +
+ Card with Shadow +
+ +
+ Lorem ipsum dolor sit amet. +
+ +
+ +
+ +
+ card image +
+ +
+ +
+ Horizontal Card +
+ +
+ Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, doloremque? amet consectetur adipisicing elit. Perspiciatis, odio. +
+
+ +
+ +
+ +
+ card image +
+ +
+ Vertical/Standard Card +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, necessitatibus? +
+ +
+ +
+ +
+
+ card image +
+
+ Text Overlay +
+
+ +
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique, eaque. +
+ + +
+ + + \ No newline at end of file diff --git a/card/close_black_24dp.svg b/card/close_black_24dp.svg new file mode 100644 index 0000000..5f1267d --- /dev/null +++ b/card/close_black_24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file