Skip to content
PlanckStar UI

Frames

Frames add an extra touch to your design and help highlight containers and sections.

You can apply them directly to your container—just place them inside, and the frame will automatically adapt to the container’s dimensions. Also, the container must have the relative class for it to work properly.

src/components/Projects.astro
---
// Import
import Frame from "../components/Frame.astro";
---
(...)
<div class="relative + Type your container dimensions here">
  (...)
  <-- You can add it anywhere you want, as long as it’s inside the container -->
  <Frame />
  (...)
</div>
(...)

1. Crossed Corners

Section titled “1. Crossed Corners”

2. Half-Square

Section titled “2. Half-Square”

3. Dotted

Section titled “3. Dotted”

4. Curved Corners

Section titled “4. Curved Corners”