| ```javascript | |
| class BucketMasterCard extends HTMLElement { | |
| static get observedAttributes() { | |
| return ['title', 'icon']; | |
| } | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| background-color: #FFFFFF; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| border: 1px solid #E4E7EB; | |
| overflow: hidden; | |
| } | |
| .card-header { | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid #E4E7EB; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| margin: 0; | |
| color: #000000; | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .card-footer { | |
| padding: 1rem 1.5rem; | |
| border-top: 1px solid #E4E7EB |