<details open>
<summary>Details Example</summary>
Whatever content or other markup we want in this space!
</details>
details {
background: hsl(30 100% 85%);
border-radius: 8px;
font-size: 1.5rem;
padding: 1rem;
&[open] {
background: hsl(130 100% 85%);
}
}
summary {
font-family: "Caveat", cursive;
font-size: 1.5em;
}
@layer base {
body {
background-image: radial-gradient(
50% 50% at center bottom,
rgba(0, 0, 0, 0.66),
rgb(38, 38, 38)
),
linear-gradient(rgb(255, 255, 255), rgb(38, 38, 38));
height: 100dvh;
padding: 1.5rem;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.