<LumexCard Class="max-w-sm">
    <LumexCardHeader Class="absolute z-10 top-2 flex-col items-start">
        <p class="text-tiny text-sky-100 uppercase font-medium">
            Premium Sound, All-Day Comfort
        </p>
        <h4 class="text-sky-50 font-bold text-xl">
            SonicWave X1
        </h4>
    </LumexCardHeader>
    <img src="assets/images/card-4.jpg"
         class="object-cover brightness-75"
         width="300"
         alt="Card background" />
    <LumexCardFooter Blurred="@true"
                     Class="absolute z-10 bottom-0 bg-white/40 border-t border-orange-100">
        <div class="flex flex-col flex-grow gap-1 text-small text-slate-900">
            <p class="font-bold">SonicWave X1</p>
            <p class="font-medium">Discover a world of crystal-clear audio</p>
        </div>
        <LumexButton Variant="@Variant.Flat"
                     Radius="@Radius.Large"
                     Size="@Size.Small"
                     Class="text-tiny text-white font-semibold bg-fuchsia-950 rounded-full">
            Order
        </LumexButton>
    </LumexCardFooter>
</LumexCard>
