Concept component displaying your latest money transactions.
Inspired by this Dribbble shot: https://dribbble.com/shots/15301605-Banking-Dashboard/attachments/7056969?mode=media
A Pen by Håvard Brynjulfsen on CodePen.
Created
January 16, 2024 12:56
-
-
Save gusbemacbe/0db600ab4cc10fc85049cbbbef8f6579 to your computer and use it in GitHub Desktop.
Latest transactions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section> | |
| <h1>Latest Transactions</h1> | |
| <h2>Today</h2> | |
| <details> | |
| <summary> | |
| <div> | |
| <span style="background-color: #f2dcbb;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> | |
| <rect width="256" height="256" fill="none"></rect> | |
| <path d="M192,120h27.05573a8,8,0,0,0,7.15542-4.42229l18.40439-36.80878a8,8,0,0,0-3.18631-10.52366L192,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| <path d="M64,120H36.94427a8,8,0,0,1-7.15542-4.42229L11.38446,78.76893a8,8,0,0,1,3.18631-10.52366L64,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| <path d="M160,40a32,32,0,0,1-64,0H64V208a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| </svg> | |
| </span> | |
| <h3> | |
| <strong>American Eagle</strong> | |
| <small>Clothes & Fashion</small> | |
| </h3> | |
| <span>-39.99 USD</span> | |
| </div> | |
| </summary> | |
| <div> | |
| <dl> | |
| <div> | |
| <dt>Time</dt> | |
| <dd>4.27pm</dd> | |
| </div> | |
| <div> | |
| <dt>Card used</dt> | |
| <dd>•••• 6890</dd> | |
| </div> | |
| <div> | |
| <dt>Reference ID</dt> | |
| <dd>3125-568911</dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </details> | |
| <details> | |
| <summary> | |
| <div> | |
| <span> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> | |
| <rect width="256" height="256" fill="none"></rect> | |
| <rect x="32" y="80" width="192" height="48" rx="7.99999" stroke-width="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect> | |
| <path d="M208,128v72a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| <line x1="128" y1="80" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> | |
| <path d="M173.25483,68.68629C161.94113,80,128,80,128,80s0-33.94113,11.31371-45.25483a24,24,0,0,1,33.94112,33.94112Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| <path d="M82.74517,68.68629C94.05887,80,128,80,128,80s0-33.94113-11.31371-45.25483A24,24,0,0,0,82.74517,68.68629Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| </svg> | |
| </span> | |
| <h3> | |
| <strong>From Håvard Brynjulfsen</strong> | |
| <small>Gift</small> | |
| </h3> | |
| <span class="plus">+50.00 USD</span> | |
| </div> | |
| </summary> | |
| <div> | |
| <dl> | |
| <div> | |
| <dt>Time</dt> | |
| <dd>8.14am</dd> | |
| </div> | |
| <div> | |
| <dt>Reference ID</dt> | |
| <dd>3125-568912</dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </details> | |
| <details> | |
| <summary> | |
| <div> | |
| <span style="background-color: #e0ece4;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"> | |
| <rect width="256" height="256" fill="none"></rect> | |
| <line x1="88" y1="24" x2="88" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> | |
| <line x1="120" y1="24" x2="120" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> | |
| <line x1="152" y1="24" x2="152" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> | |
| <line x1="32" y1="216" x2="208" y2="216" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> | |
| <path d="M83.29651,216.0038A88.01441,88.01441,0,0,1,32,136V88H208v48a88.0144,88.0144,0,0,1-51.29712,80.00408" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| <path d="M208,88h0a32,32,0,0,1,32,32V128a32,32,0,0,1-32,32h-3.37846" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> | |
| </svg> | |
| </span> | |
| <h3> | |
| <strong>Starbucks</strong> | |
| <small>Food & Beverage</small> | |
| </h3> | |
| <span>-14.99 USD</span> | |
| </div> | |
| </summary> | |
| <div> | |
| <dl> | |
| <div> | |
| <dt>Time</dt> | |
| <dd>7.49am</dd> | |
| </div> | |
| <div> | |
| <dt>Card used</dt> | |
| <dd>•••• 6890</dd> | |
| </div> | |
| <div> | |
| <dt>Reference ID</dt> | |
| <dd>3125-568913</dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </details> | |
| <details> | |
| <summary> | |
| <div> | |
| <span> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><g><path d="M179.1333,108.32931a112.19069,112.19069,0,0,0-102.3584.04859" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M164.29541,136.71457a79.94058,79.94058,0,0,0-72.68359.04736" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M149.47217,165.07248a47.97816,47.97816,0,0,0-43.03662.04736" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></g></svg> | |
| </span> | |
| <h3> | |
| <strong>Spotify</strong> | |
| <small>Music & Entertainment</small> | |
| </h3> | |
| <span>-9.99 USD</span> | |
| </div> | |
| </summary> | |
| <div> | |
| <dl> | |
| <div> | |
| <dt>Time</dt> | |
| <dd>1.00am</dd> | |
| </div> | |
| <div> | |
| <dt>Card used</dt> | |
| <dd>•••• 6890</dd> | |
| </div> | |
| <div> | |
| <dt>Reference ID</dt> | |
| <dd>3125-568915</dd> | |
| </div> | |
| </dl> | |
| </div> | |
| </details> | |
| </section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Nope |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); | |
| *, | |
| *:after, | |
| *:before { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Inter", sans-serif; | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| padding: 5rem 0; | |
| font-size: clamp(1rem, 2.5vw, 1.125rem); | |
| } | |
| section { | |
| width: 90%; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| & + section { | |
| margin-top: 2.5em; | |
| } | |
| } | |
| h1 { | |
| font-weight: 700; | |
| line-height: 1.125; | |
| font-size: clamp(1.5rem, 2.5vw, 2.5rem); | |
| } | |
| h2 { | |
| margin-top: .25em; | |
| color: #999; | |
| font-size: clamp(1.125rem, 2.5vw, 1.25rem); | |
| & + * { | |
| margin-top: 1.5em; | |
| } | |
| } | |
| summary { | |
| background-color: #fff; | |
| position: relative; | |
| cursor: pointer; | |
| padding: 1em .5em; | |
| list-style: none; // Remove arrow | |
| &::-webkit-details-marker { | |
| display: none; // Remove arrow | |
| } | |
| &:hover { | |
| background-color: #f2f5f9; | |
| } | |
| div { | |
| display: flex; | |
| align-items: center; | |
| } | |
| h3 { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| small { | |
| color: #999; | |
| font-size: .875em; | |
| } | |
| strong { | |
| font-weight: 700; | |
| } | |
| span:first-child { | |
| width: 4rem; | |
| height: 4rem; | |
| border-radius: 10px; | |
| background-color: #f3e1e1; | |
| display: flex; | |
| flex-shrink: 0; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 1.25em; | |
| svg { | |
| width: 2.25rem; | |
| height: 2.25rem; | |
| } | |
| } | |
| span:last-child { | |
| font-weight: 700; | |
| margin-left: auto; | |
| } | |
| &:focus { | |
| outline: none; | |
| } | |
| .plus { | |
| color: #289672; | |
| } | |
| } | |
| details { | |
| border-bottom: 1px solid #b5bfd9; | |
| &[open] { | |
| box-shadow: -3px 0 0 #b5bfd9; | |
| } | |
| &:first-of-type { | |
| border-top: 1px solid #b5bfd9; | |
| } | |
| & > div { | |
| padding: 2em 2em 0; | |
| font-size: .875em; | |
| } | |
| } | |
| dl { | |
| display: flex; | |
| flex-wrap: wrap; | |
| dt { | |
| font-weight: 700; | |
| } | |
| div { | |
| margin-right: 4em; | |
| margin-bottom: 2em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment