Turbine UI - Laravel and Tailwind CSS Card Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Card

A structured content container

x-t-card

Preview and Examples

Default card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.

Brand card

Primary card

Secondary card

Success card

Warning card

Danger card

<x-turbine-ui-card variant="light">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="light">Default card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="brand">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="brand">Brand card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="primary">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="primary">Primary card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="secondary">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="secondary">Secondary card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="success">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="success">Success card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="warning">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="warning">Warning card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>
 
<x-turbine-ui-card variant="danger">
    <x-slot:header>
        <x-turbine-ui-heading level="6" variant="danger">Danger card</x-turbine-ui-heading>
    </x-slot:header>
    <x-slot:body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam nam nulla similique voluptate earum culpa magnam sunt, dolorum accusamus asperiores sit.</p>
    </x-slot:body>
    <x-slot:footer class="flex justify-between">
        <x-turbine-ui-button variant="light">Cancel</x-turbine-ui-button>
        <x-turbine-ui-button variant="success">Save</x-turbine-ui-button>
    </x-slot:footer>
</x-turbine-ui-card>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
divide	boolean	true false	Adds a divide between elements
hollow	boolean	true false	Removes background colour
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette