Design Blocks

Product Card

Back

1. Premium E Commerce Product Card Block

blade

Save $50

Audio and Electronics

★ 4.9

(128)

Aura SoundPro Wireless ANC

Active noise cancelling studio headphones with 40h playback and custom acoustic drivers.

$299.00

$349.00

<x-aura::card size="md" padding="none">
    <x-aura::card padding="lg" divided="false">
        <x-aura::flex align="center" justify="between">
            <x-aura::badge variant="neutral" size="sm">
                Save $50
            </x-aura::badge>
            <x-aura::icon-button icon="heart" variant="ghost" size="sm" label="Save wishlist" />
        </x-aura::flex>

        <x-aura::center>
            <x-aura::icon name="headphones" size="2xl" container="true" />
        </x-aura::center>
    </x-aura::card>

    <x-aura::card padding="lg" gap="4" divided="false">
        <x-aura::kicker>
            Audio and Electronics
        </x-aura::kicker>

        <x-aura::heading level="3" size="sm">
            Aura SoundPro Wireless ANC
        </x-aura::heading>

        <x-aura::separator />

        <x-aura::flex align="center" justify="between">
            <x-aura::heading level="4" size="xl">
                $299.00
            </x-aura::heading>

            <x-aura::button variant="primary" size="md">
                Add
            </x-aura::button>
        </x-aura::flex>
    </x-aura::card>
</x-aura::card>

2. Grid Comparison Layout

blade

Workspace Popular

Minimalist Ergonomic Studio Desk

Solid oak desk with motorized height memory controls.

$649.00

Office Low Stock

Adaptive Breathable Mesh Chair

3D lumbar support with 4D dynamic armrests.

$389.00

<x-aura::grid cols="1" sm="2" gap="6">
    <x-aura::card gap="3">
        <x-aura::flex align="center" justify="between">
            <x-aura::badge variant="neutral" size="sm">
                Workspace
            </x-aura::badge>
            <x-aura::badge variant="subtle" size="sm">
                Popular
            </x-aura::badge>
        </x-aura::flex>

        <x-aura::heading level="4" size="xs">
            Minimalist Ergonomic Studio Desk
        </x-aura::heading>

        <x-slot:footer>
            <x-aura::heading level="4" size="lg">
                $649.00
            </x-aura::heading>
            <x-aura::button variant="secondary" size="sm">
                View
            </x-aura::button>
        </x-slot:footer>
    </x-aura::card>
</x-aura::grid>

Aura Wire