{"html":"

\n\n

How to make this material card ?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,\nmolestiae quas vel sint commodi.

\n\n

","css":".card {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n border-radius: 0.75rem;\n background-color: white;\n width: 300px;\n height: 370px;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),\n 0 2px 4px -2px rgba(0,0,0,.1);\n}\n\n.header {\n position: relative;\n background-clip: border-box;\n margin-top: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n border-radius: 0.75rem;\n background-color: rgb(33 150 243);\n box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);\n height: 14rem;\n}\n\n.info {\n border: none;\n padding: 1.5rem;\n text-align: center;\n}\n\n.title {\n color: rgb(38 50 56);\n letter-spacing: 0;\n line-height: 1.375;\n font-weight: 600;\n font-size: 1.25rem;\n margin-bottom: 0.5rem;\n}\n\n.footer {\n padding: 0.75rem;\n border: 1px solid rgb(236 239 241);\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: rgba(0, 140, 255, 0.082);\n}\n\n.tag {\n font-weight: 300;\n font-size: .75rem;\n display: block;\n}\n\n.action {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: none;\n outline: none;\n box-shadow: 0 4px 6px -1px rgba(33,150,243,.4),0 2px 4px -2px rgba(33,150,243,.4);\n color: rgb(255 255 255);\n text-transform: uppercase;\n font-weight: 700;\n font-size: .75rem;\n padding: 0.75rem 1.5rem;\n background-color: rgb(33 150 243);\n border-radius: 0.5rem;\n}\n\n"}

hard-mole-83

👁 实时预览

📝 源代码