Layout

<x-layout.title-bar :as-heading="false" title="Page Title">
    <x-slot:actions>
        <x-btn style="tertiary" size="sm">Action</x-btn>
        <x-btn size="sm">Primary Action</x-btn>
    </x-slot:actions>
</x-layout.title-bar>

<x-layout.title-bar :as-heading="false" title="Page Title" icon="fal-feather" />

<x-layout.title-bar :as-heading="false" title="Page Title" previous-url="#" />

<div class="grid grid-cols-3 gap-4 items-center">
    <x-layout.photo url="https://gravatar.com/avatar/3f76cdf0c0cfa00f10fd1216e15a410941cd9328746f963fc3258e6f147833d2?size=128" size="lg" />
    <x-layout.photo url="https://gravatar.com/avatar/3f76cdf0c0cfa00f10fd1216e15a410941cd9328746f963fc3258e6f147833d2?size=128" />
    <x-layout.photo url="https://gravatar.com/avatar/3f76cdf0c0cfa00f10fd1216e15a410941cd9328746f963fc3258e6f147833d2?size=128" size="sm" />
    <x-layout.photo url="" size="lg" />
    <x-layout.photo url="" />
    <x-layout.photo url="" size="sm" />
</div>

<div class="grid grid-cols-3 gap-4 items-center">
    <x-layout.icon icon="fal-tags" style="primary" size="lg" />
    <x-layout.icon icon="fal-tags" style="primary" />
    <x-layout.icon icon="fal-tags" style="primary" size="sm" />
    <x-layout.icon icon="fal-tags" style="secondary" size="lg" />
    <x-layout.icon icon="fal-tags" style="secondary" />
    <x-layout.icon icon="fal-tags" style="secondary" size="sm" />
    <x-layout.icon icon="fal-tags" style="tertiary" size="lg" />
    <x-layout.icon icon="fal-tags" style="tertiary" />
    <x-layout.icon icon="fal-tags" style="tertiary" size="sm" />
</div>

<div class="space-y-4">
    <x-layout.progress-bar progress="75" size="lg" />
    <x-layout.progress-bar progress="50" />
    <x-layout.progress-bar progress="25" size="sm" />
</div>

<div class="grid grid-cols-3 gap-4 items-center">
    <x-layout.spinner size="lg" />
    <x-layout.spinner />
    <x-layout.spinner size="sm" />
</div>

<div class="mx-auto">
    <x-layout.pulser />
</div>