PK TRQT f-collapsible-alert-2.cccompPK TRo
component.json
r{"UUID":"d9bbd15d-52af-4342-a359-9d79331c5fc5","additional_states":{"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 1":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3470","appId":"RSD","appVersion":3470,"buildNumber":5930,"component_resources":{"classes":5,"file_sizes_values":[0,0,0],"file_type_values":[0,0,0],"html_elements":0,"ids":0,"links_external":0,"links_internal":0,"local_files":0,"styled_breakpoints":"1024px"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
\n@media screen and (min-width: 800px) {\n .alert-inner {clip-path: circle(10% at 90% 25%);}\n\n .alert-inner:hover {\n clip-path: circle(100%);}\n } \n \n\">
iHey!
This is an informative card that will tell you something that's... well, important!
","htmlembed":{},"mobile_first":true,"name":"f-collapsible-alert-2","resources":{},"stylesheet":".container.alert-container {\n display:flex;\n justify-content:center;\n align-items:center;\n font-size:2rem;\n min-width:200px;\n max-width:400px;\n margin-top:20px;\n margin-right:auto;\n margin-left:auto;\n padding-top:10px;\n padding-right:10px;\n padding-bottom:10px;\n padding-left:10px;\n}\n\n.container.alert-inner {\n padding-top:16px;\n padding-right:16px;\n padding-bottom:16px;\n padding-left:16px;\n border-top-left-radius:10px 10px;\n border-top-right-radius:10px 10px;\n border-bottom-right-radius:10px 10px;\n border-bottom-left-radius:10px 10px;\n min-width:200px;\n max-width:400px;\n width:100%;\n transition-timing-function:ease-in-out;\n transition-duration:0.5s;\n cursor:pointer;\n background-color:rgba(205, 139, 9, 1);\n}\n\n.container.alert-inner.cfs-hover {\n background-color:rgba(10, 82, 226, 1);\n}\n\nspan.text-element.alert-text {\n float:right;\n font-weight:700;\n transition-property:color;\n transition-timing-function:linear;\n transition-duration:0.5s;\n transition-delay:0s;\n margin-right:5.5%;\n margin-top:1.5%;\n position:relative;\n font-family:'Nunito', sans-serif;\n font-style:italic;\n min-width:0px;\n color:rgba(255, 255, 255, 1);\n}\n\nh1.alert-heading {\n color:rgba(255, 255, 255, 1);\n font-size:30px;\n margin-top:0px;\n margin-bottom:5px;\n}\n\np.paragraph {\n font-family:'Roboto', sans-serif;\n font-size:16px;\n color:rgba(94, 89, 85, 1);\n line-height:1.7;\n padding-bottom:5px;\n}\n\np.paragraph.alert-para {\n color:rgba(255, 255, 255, 1);\n font-size:18px;\n margin-top:0px;\n margin-bottom:3px;\n}\n\n@media screen and (min-width: 64rem) {\n .container.alert-inner {\n background-color:rgba(205, 139, 9, 1);\n }\n\n .container.alert-inner.cfs-hover {\n background-color:rgba(10, 82, 226, 1);\n }\n\n span.text-element.alert-text {\n margin-top:1.5%;\n margin-right:5.5%;\n }\n}","timestamp":1624955727827,"type":"Container","units":"rem"}
PK TRo
component.jsonPK <