Docs Menu

Cards

Cards have the following properties which are optional:

Property Required? Type Options Description
slot:body no text|mixed Chunk of text that will be visible under the Card's head image.
href no string If set to anything (a relative or absolute path), the button converts to an tag.
slot:image no string Image to be displayed in the Card's head.
slot:title no string|mixed Title of the Card.
slot:footer no string|mixed Content at bottom of the card, could include buttons or other info.

Basic Examples
Basic Card with an Image, Title, and Body text. 

            
 1<x-fcui-card href="https://example.com">
 2    <x-slot:image>
 3        <img src="https://picsum.photos/400/400" alt="Random Image">
 4    </x-slot:image>
 5 
 6    <x-slot:title>
 7        Hello There!
 8    </x-slot:title>
 9 
10    <x-slot:body>
11        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus
12        distinctio ullam.
13    </x-slot:body>
14 
15    <x-slot:footer>
16        <x-fcui-button href="/next/page">Go To Article</x-fcui-button>
17    </x-slot:footer>
18</x-fcui-card>
Random Image

Hello There!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus distinctio ullam.

Go To Article

Advanced Example
A minified Card with a button in the footer. 

            
 1<x-fcui-card>
 2 
 3    <x-slot:image>
 4        <img src="https://picsum.photos/400/400" alt="Random Image">
 5    </x-slot:image>
 6 
 7    <x-slot:footer>
 8        <x-fcui-button icon='<i class="fa-solid fa-arrow-up-right-from-square"></i>'>Check it out!</x-fcui-button>
 9    </x-slot:footer>
10 
11</x-fcui-card>
Random Image