Turbine UI - Laravel and Tailwind CSS Card Component

Card

A structured content container

Tag: x-turbine-ui-card

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	Description
accent	boolean	Adds an accent
border	boolean	Adds a border
divide	boolean	Adds a divide between elements
hollow	boolean	Removes background colour
ring	boolean	Adds a ring
rounded	boolean	Adds a rounded corner
shadow	boolean	Adds a shadow
size	string	Size is used to control styles such as margin, padding and font size. Extensible via the theme.
variant	string	A variant is like a colour palette