Salad UI

Card

Renders a card container.

Read more Read less

Examples:

<.card>
  <.card_header>
    <.card_title>Account Settings</.card_title>
    <.card_description>Manage your account settings.</.card_description>
  </.card_header>
  <.card_content>
    <p>Your account details and preferences.</p>
  </.card_content>
  <.card_footer>
    <.button variant="outline">Cancel</.button>
    <.button>Save</.button>
  </.card_footer>
</.card>
Card Open in playground

Create your project

Deploy your new project in one-click. 

<.card class="w-[350px]">
  <.card_header>
    <.card_title>Create your project</.card_title>
    <.card_description>Deploy your new project in one-click.</.card_description>
  </.card_header>
  <.card_content>
    <form>
      <div class="grid w-full items-center gap-4">
        <div class="flex flex-col space-y-1.5">
          <.label html-for="name">Name</.label>
          <.input id="name" placeholder="Name of your project" />
        </div>
      </div>
    </form>
  </.card_content>
  <.card_footer class="flex justify-between">
    <.button variant="outline">Cancel</.button>
    <.button>Deploy</.button>
  </.card_footer>
</.card>