Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
  <div class="rounded-xl border bg-background shadow w-96">
    <div class="flex flex-col space-y-1.5 p-6">
      <h3 class="font-semibold leading-none tracking-tight">You might like "PhlexUi"</h3>
      <p class="text-sm text-muted-foreground">@joeldrapper</p>
    </div>
    <div class="p-6 pt-0">
      <div class="relative w-full" style="padding-bottom: 56.25%;">
        <div class="bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent rounded-md overflow-hidden border"><img alt="Placeholder" loading="lazy" src="https://phlexui.com/assets/pattern-5f5dd643.jpg"></div>
      </div>
    </div>
    <div class="items-center p-6 pt-0 flex justify-end gap-x-2"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm">See more</button><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 h-9 text-sm">Buy now</button></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
render(TestView.new) do
  Card(class: "w-96") do
    CardHeader do
      CardTitle { 'You might like "PhlexUi"' }
      CardDescription { "@joeldrapper" }
    end
    CardContent do
      AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
        img(
          alt: "Placeholder",
          loading: "lazy",
          src: helpers.image_url("pattern.jpg")
        )
      end
    end
    CardFooter(class: "flex justify-end gap-x-2") do
      Button(variant: :outline) { "See more" }
      Button(variant: :primary) { "Buy now" }
    end
  end
end

Default CardPreview

No params configured.