Use a dashed outline for an available slot or an optional surface.
Use border-dashed on surfaces with borders declared on all four sides, such as Card or an element with border. For those surfaces, width, color and radius stay the same. For a surface with only a directional border, add border first to define the full outline. The utility is scoped to a Moo UI owner.
border-dashed
border
1 2 3 4 5 6 7 8<div class="card card--sm p-0 border border-dashed"> <div class="card-body p-0"> <button class="btn btn-ghost w-100 justify-content-start p-3 rounded-4" type="button"> <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i> Add item </button> </div> </div>
<div class="card card--sm p-0 border border-dashed"> <div class="card-body p-0"> <button class="btn btn-ghost w-100 justify-content-start p-3 rounded-4" type="button"> <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i> Add item </button> </div> </div>
No matching pages.
Restore the default appearance.