Last active
December 22, 2021 15:40
-
-
Save amattu2/db81f1cd3b27dcd7f671e0b51bff46e4 to your computer and use it in GitHub Desktop.
This is an automotive vehicle service history listing design/template using HTML/CSS. It's designed for use within the scope of an automotive shop management system.
This file contains 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
| <!-- | |
| Produced: Sun Dec 19 2021 | |
| Author: Alec M. | |
| GitHub: https://amattu.com/links/github | |
| Copyright: (C) 2021 Alec M. | |
| License: License GNU Affero General Public License v3.0 | |
| This program is free software: you can redistribute it and/or modify | |
| it under the terms of the GNU Affero General Public License as published by | |
| the Free Software Foundation, either version 3 of the License, or | |
| (at your option) any later version. | |
| This program is distributed in the hope that it will be useful, | |
| but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| GNU Affero General Public License for more details. | |
| You should have received a copy of the GNU Affero General Public License | |
| along with this program. If not, see <http://www.gnu.org/licenses/>. | |
| --> | |
| <html> | |
| <head> | |
| <title>Automotive Service History</title> | |
| <!-- include material icons --> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"> | |
| <style> | |
| .material-icons, .material-icons-outlined { | |
| user-select: none; | |
| } | |
| :root { | |
| --colors-blue: #4285f4; | |
| --colors-lblue: #42a5f5; | |
| --colors-green: #4caf50; | |
| --colors-dred: #e74c3c; | |
| --colors-red: #d32f2f; | |
| --colors-lred: rgba(231, 76, 60, 1); | |
| --colors-black: #262626; | |
| --colors-gblack: #3b3b3b; | |
| --colors-orange: #e67e22; | |
| } | |
| [data-tooltip]::before { | |
| top: 50%; | |
| margin-top: -11px; | |
| font-weight: 600; | |
| font-family: 'Lato', sans-serif; | |
| border-radius: 2px; | |
| background: var(--colors-gblack); | |
| color: #fff; | |
| content: attr(data-tooltip); | |
| font-size: 12px; | |
| text-decoration: none; | |
| visibility: hidden; | |
| opacity: 0; | |
| padding: 4px 7px; | |
| position: absolute; | |
| transform: scale(0); | |
| right: 100%; | |
| line-height: 1.3; | |
| z-index: 999; | |
| white-space: nowrap; | |
| transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); | |
| } | |
| [data-tooltip]:hover::before, [data-tooltip][data-tooltip-visible]::before { | |
| visibility: visible; | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| [data-tooltip][data-tooltip-open-right]::before { | |
| transform-origin: top right; | |
| } | |
| [data-tooltip][data-tooltip-open-left]::before { | |
| left: 100% !important; | |
| right: unset !important; | |
| transform-origin: top left; | |
| } | |
| [data-tooltip][data-tooltip-margin-right]::before { | |
| margin-right: 12px; | |
| } | |
| [data-tooltip][data-tooltip-margin-left]::before { | |
| margin-left: 12px; | |
| } | |
| [data-tooltip][data-tooltip-open-right]:hover::before { | |
| transform-origin: right center 0; | |
| } | |
| [data-tooltip][data-tooltip-open-left]:hover::before { | |
| transform-origin: left center 0; | |
| } | |
| .item-dotted { | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-decoration-style: dashed; | |
| text-decoration-thickness: 1px; | |
| position: relative; | |
| } | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: sans-serif; | |
| color: #262626; | |
| background-color: #f2f2f2; | |
| } | |
| .container { | |
| width: 950px; | |
| margin: 0 auto; | |
| margin-top: 25px; | |
| background: #fff; | |
| padding: 10px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .vehicle-event-list { | |
| background: #f2f2f2; | |
| } | |
| .vehicle-event { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .vehicle-event .event-date { | |
| font-size: 12px; | |
| opacity: 0.6; | |
| width: 110px; | |
| text-align: center; | |
| margin-right: 20px; | |
| vertical-align: text-top; | |
| } | |
| .vehicle-event .event-icon { | |
| position: relative; | |
| padding: 4px; | |
| border: 1px solid rgba(0, 0, 0, 0.15); | |
| border-radius: 50%; | |
| background: #fff; | |
| justify-content: center; | |
| align-items: center; | |
| margin-right: 9px; | |
| z-index: 3; | |
| } | |
| .event-cards { | |
| width: calc(100% - 174px); | |
| } | |
| .card { | |
| box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); | |
| background: #fff; | |
| border-radius: 2px; | |
| margin: 7px 5px; | |
| } | |
| .card-header { | |
| padding: 14px 10px; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .card-header .card-title { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| opacity: 0.6; | |
| font-weight: bold; | |
| } | |
| .card-header input { | |
| margin-right: 8px; | |
| } | |
| .card-header .card-button-outlined { | |
| margin: unset; | |
| margin-left: auto; | |
| } | |
| .card-detail-grid { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: #f2f2f2; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .card-detail-grid:last-child { | |
| border-bottom: unset; | |
| } | |
| .card-detail-grid.light { | |
| background: #fff; | |
| position: sticky; | |
| top: 0; | |
| z-index: 3; | |
| } | |
| .card-detail:not(:last-of-type) { | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .card-detail { | |
| width: auto; | |
| flex: 1; | |
| padding: 8px 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .detail-text-label { | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| opacity: 0.6; | |
| margin-bottom: 4px; | |
| } | |
| .card-detail-text { | |
| margin-right: auto; | |
| } | |
| .detail-text-content { | |
| font-weight: bold; | |
| } | |
| .card-detail-icon { | |
| opacity: 0.6; | |
| } | |
| .vehicle-event:not(:first-of-type) { | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .vehicle-event:not(:first-of-type)::before { | |
| content: " "; | |
| width: 1px; | |
| position: absolute; | |
| left: calc(110px + 20px + 34px/2); | |
| bottom: 50%; | |
| background: rgba(0, 0, 0, 0.1); | |
| height: 50%; | |
| } | |
| .vehicle-event:not(:last-of-type)::after { | |
| content: " "; | |
| width: 1px; | |
| position: absolute; | |
| left: calc(110px + 20px + 34px/2); | |
| top: 50%; | |
| background: rgba(0, 0, 0, 0.1); | |
| height: 50%; | |
| } | |
| .card-source-warning { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| margin-left: auto; | |
| font-size: 12px; | |
| padding: 4px; | |
| user-select: none; | |
| } | |
| .card-source-warning i { | |
| font-size: 14px; | |
| color: var(--colors-red); | |
| margin-right: 5px; | |
| } | |
| .card-button-group { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| padding: 10px; | |
| } | |
| .card-button-outlined { | |
| margin: 0 6px; | |
| padding: 8px 10px; | |
| border: 1px solid; | |
| cursor: pointer; | |
| color: var(--colors-blue); | |
| font-size: 13px; | |
| border-radius: 2px; | |
| user-select: none; | |
| } | |
| .card-content { | |
| padding: 15px; | |
| overflow: hidden; | |
| transition: all 0.2s ease; | |
| } | |
| .card:not(.content-expanded) .card-content { | |
| max-height: 0px; | |
| padding: 0 15px; | |
| } | |
| .card.content-expanded .card-content { | |
| max-height: 9999px; | |
| } | |
| .content-item:not(:last-of-type) { | |
| margin-bottom: 10px; | |
| } | |
| .content-item-content .item-content-comments { | |
| border-left: 4px solid var(--colors-blue); | |
| padding: 3px 6px; | |
| background: #f2f2f2; | |
| border-radius: 0 3px 3px 0; | |
| text-align: left; | |
| white-space: pre-wrap; | |
| } | |
| .content-item-content .item-content-comments.private { | |
| margin-top: 5px; | |
| border-left: 4px solid var(--colors-gblack); | |
| } | |
| .content-item-header { | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| font-weight: bold; | |
| opacity: 0.6; | |
| } | |
| .item-attachment-pill { | |
| display: inline-flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| background: #fff; | |
| padding: 5px 3px; | |
| border-radius: 3px; | |
| margin: 5px; | |
| color: #3b3b3b; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .attachment-pill-icon i { | |
| font-size: 18px; | |
| } | |
| .attachment-pill-text { | |
| font-size: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Vehicle Service History Listing</h2> | |
| <p>Designed to be integrated within a automotive management system. Below is an example listing/layout for a single vehicle preview.</p> | |
| <div class='vehicle-event-list'> | |
| <div class='vehicle-event'> | |
| <div class='event-date'> | |
| Aug 14th, 2021 | |
| </div> | |
| <div class='event-icon'> | |
| <i class="material-icons">event</i> | |
| </div> | |
| <div class='event-cards'> | |
| <div class='card'> | |
| <div class='card-header'> | |
| <div class='card-title'>Appointment</div> | |
| <div class='card-button-outlined' data-toggle='more'>View</div> | |
| </div> | |
| <div class='card-detail-grid light'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Service</div> | |
| <div class='detail-text-content'>0W20 Oil Change</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">description</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Time</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="4hrs, 31m">7:15 AM - 1:45 PM</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">timelapse</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Technician</div> | |
| <div class='detail-text-content'>W.V.</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">car_repair</i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card'> | |
| <div class='card-header'> | |
| <input type='checkbox' /> | |
| <div class='card-title'>Service Ticket</div> | |
| </div> | |
| <div class='card-detail-grid light'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Description</div> | |
| <div class='detail-text-content'>Battery Replacement</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">description</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-detail-grid'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Invoice #</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">receipt</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Time</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">access_time</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Odometer</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="19,750mi ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">119,752mi</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">linear_scale</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Total</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">attach_money</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-footer'> | |
| <div class='card-source-warning'> | |
| <i class="material-icons-outlined">warning</i> | |
| <span> | |
| This event was sourced from a third party. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='vehicle-event'> | |
| <div class='event-date'> | |
| Jul 29th, 2021 | |
| </div> | |
| <div class='event-icon'> | |
| <i class="material-icons">event</i> | |
| </div> | |
| <div class='event-cards'> | |
| <div class='card'> | |
| <div class='card-header'> | |
| <input type='checkbox' /> | |
| <div class='card-title'>Service Ticket</div> | |
| </div> | |
| <div class='card-detail-grid light'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Description</div> | |
| <div class='detail-text-content'>{6.4Q - 5608} SYNTHETIC OC, FRONT BRAKES, WP, TB, ETC</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">description</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-detail-grid'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Invoice #</div> | |
| <div class='detail-text-content'>52552</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">receipt</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Time</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="13 hours ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">7:53 AM</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">access_time</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Odometer</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="32,733mi ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">119,752mi</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">linear_scale</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Total</div> | |
| <div class='detail-text-content'>$1,157.92</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">attach_money</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-content'> | |
| <div class='content-item'> | |
| <div class='content-item-header'>Comments</div> | |
| <div class='content-item-content'> | |
| <div class='item-content-comments'>If you click on a history event, it expands down into a regionless (i.e. no background and not apart of the box-shadow card) grid of key:value items (i.e. similar to the customer contact details) | |
| It uses opacity to indicate if the record is unverified (CarFax/Autocheck/Etc sourced) | |
| </div> | |
| <div class='item-content-comments private'>If you click on a history event, it expands down into a regionless (i.e. no background and not apart of the box-shadow card) grid of key:value items (i.e. similar to the customer contact details) | |
| It uses opacity to indicate if the record is unverified (CarFax/Autocheck/Etc sourced) | |
| </div> | |
| </div> | |
| </div> | |
| <div class='content-item'> | |
| <div class='content-item-header'>Services</div> | |
| <div class='content-item-content'> | |
| <div class='item-content-services'> | |
| <ul> | |
| <li>Vehicle serviced | |
| <li>Pre-delivery inspection completed | |
| <li>Window tint installed | |
| <li>Vehicle washed/detailed | |
| <li>Tire condition and pressure checked | |
| <li>Nitrogen fill tires | |
| <li>Anti-theft/keyless device/alarm installed | |
| <li>Safety inspection performed | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-footer'> | |
| <div class='card-button-group'> | |
| <div class='card-button-outlined' data-toggle='more'>More Details</div> | |
| <div class='card-button-outlined'>Edit</div> | |
| <a class='card-button-outlined'>PDF</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card'> | |
| <div class='card-header'> | |
| <input type='checkbox' /> | |
| <div class='card-title'>Service Ticket</div> | |
| </div> | |
| <div class='card-detail-grid light'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Description</div> | |
| <div class='detail-text-content'>MERCEDES A-SERVICE & INSPECTION</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">description</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-detail-grid'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Invoice #</div> | |
| <div class='detail-text-content'>44798</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">receipt</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Time</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="13 hours ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">1:59 PM</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">access_time</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Odometer</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="14,000mi ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">72,056mi</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">linear_scale</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Total</div> | |
| <div class='detail-text-content'>$256.70</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">attach_money</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-content'> | |
| <div class='content-item'> | |
| <div class='content-item-header'>Attachments</div> | |
| <div class='content-item-content'> | |
| <a class='item-attachment-pill'> | |
| <div class='attachment-pill-icon'> | |
| <i class="material-icons-outlined">insert_drive_file</i> | |
| </div> | |
| <div class='attachment-pill-text'>44798_1.pdf</div> | |
| </a> | |
| <a class='item-attachment-pill'> | |
| <div class='attachment-pill-icon'> | |
| <i class="material-icons-outlined">insert_drive_file</i> | |
| </div> | |
| <div class='attachment-pill-text'>392nd19119192ue92.pdf</div> | |
| </a> | |
| <a class='item-attachment-pill'> | |
| <div class='attachment-pill-icon'> | |
| <i class="material-icons-outlined">insert_drive_file</i> | |
| </div> | |
| <div class='attachment-pill-text'>GEICO_ESTIMATE_4829101101.pdf</div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class='content-item'> | |
| <div class='content-item-header'>Forked</div> | |
| <div class='content-item-content'> | |
| <div class='item-content-forked'> | |
| → Forked From <a>#32819 – GENERAL CHECKOVER & INSPECTION</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-footer'> | |
| <div class='card-button-group'> | |
| <div class='card-button-outlined' data-toggle='more'>More Details</div> | |
| <a class='card-button-outlined'>PDF</a> | |
| </div> | |
| <div class='card-source-warning'> | |
| <i class="material-icons-outlined">warning</i> | |
| <span> | |
| This event was sourced from another customer. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card'> | |
| <div class='card-header'> | |
| <div class='card-title'>Recall</div> | |
| </div> | |
| <div class='card-detail-grid light'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Description</div> | |
| <div class='detail-text-content'>NHTSA RECALL #81-183910</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">description</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-detail-grid'> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Invoice #</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">receipt</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Time</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">access_time</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Odometer</div> | |
| <div class='detail-text-content item-dotted' data-tooltip="74,000mi ago" data-tooltip-open-right="1" data-tooltip-margin-right="1">72,011mi</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">linear_scale</i> | |
| </div> | |
| </div> | |
| <div class='card-detail'> | |
| <div class='card-detail-text'> | |
| <div class='detail-text-label'>Total</div> | |
| <div class='detail-text-content'>-</div> | |
| </div> | |
| <div class='card-detail-icon'> | |
| <i class="material-icons-outlined">attach_money</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='card-footer'> | |
| <div class='card-source-warning'> | |
| <i class="material-icons-outlined">warning</i> | |
| <span> | |
| This event was sourced from the NHTSA. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| /** | |
| * Basic interaction script | |
| * | |
| * Use as desired | |
| **/ | |
| // Activate all elements with a toggle | |
| const toggles = document.querySelectorAll("[data-toggle]"); | |
| toggles.forEach((e) => { | |
| const parent = e.parentElement.parentElement.parentElement; | |
| e.onclick = () => { | |
| parent.classList.toggle("content-expanded") | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment