{"html":"

\n \n

\n New brand name\n

\n Size\n

\n $299\n

\n \n

\n","css":".card {\n --bg-card: #27272a;\n --primary: #6d28d9;\n --primary-800: #4c1d95;\n --primary-shadow: #2e1065;\n --light: #d9d9d9;\n --zinc-800: #18181b;\n --bg-linear: linear-gradient(0deg, var(--primary) 50%, var(--light) 125%);\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n\n padding: 1rem;\n width: 14rem;\n background-color: var(--bg-card);\n\n border-radius: 1rem;\n}\n\n.image_container {\n overflow: hidden;\n cursor: pointer;\n\n position: relative;\n z-index: 5;\n\n width: 100%;\n height: 8rem;\n background-color: var(--primary-800);\n\n border-radius: 0.5rem;\n}\n\n.image_container .image {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 3rem;\n fill: var(--light);\n}\n\n.title {\n overflow: clip;\n\n width: 100%;\n\n font-size: 1rem;\n font-weight: 600;\n color: var(--light);\n text-transform: capitalize;\n text-wrap: nowrap;\n text-overflow: ellipsis;\n}\n\n.size {\n font-size: 0.75rem;\n color: var(--light);\n}\n\n.list-size {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n\n margin-top: 0.25rem;\n}\n\n.list-size .item-list {\n list-style: none;\n}\n\n.list-size .item-list-button {\n cursor: pointer;\n\n padding: 0.5rem;\n background-color: var(--zinc-800);\n\n font-size: 0.75rem;\n color: var(--light);\n\n border: 2px solid var(--zinc-800);\n border-radius: 0.25rem;\n\n transition: all 0.3s ease-in-out;\n}\n\n.item-list-button:hover {\n border: 2px solid var(--light);\n}\n.item-list-button:focus {\n background-color: var(--primary);\n\n border: 2px solid var(--primary-shadow);\n\n box-shadow: inset 0px 1px 4px var(--primary-shadow);\n}\n\n.action {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.price {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--light);\n}\n\n.cart-button {\n cursor: pointer;\n\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.25rem;\n\n padding: 0.5rem;\n width: 100%;\n background-image: var(--bg-linear);\n\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--light);\n text-wrap: nowrap;\n\n border: 2px solid hsla(262, 83%, 58%, 0.5);\n border-radius: 0.5rem;\n box-shadow: inset 0 0 0.25rem 1px var(--light);\n}\n\n.cart-button .cart-icon {\n width: 1rem;\n}\n"}

old-eagle-40

👁 实时预览

📝 源代码

🔗 相关联的样式