Horizontal Card

Set up

<script>
  import { HorizontalCard } from "flowbite-svelte";
</script>

Examples

<HorizontalCard
  img="/images/image-4.jpeg"
  header="Horizontal card"
  link="/"
>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sint,iam.
</HorizontalCard>

Horizontal card

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sint,iam quos sed rem provident, aspernatur sunt illum eum ipsam quas. Sed ipsum ex non.

<HorizontalCard>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sint.
</HorizontalCard>

Lorem ipsum dolor sit ametit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sint,iam quos sed rem provident, a

Props

The component has the following props, type, and default values. See types page for type information.

Name	Type	Default
link	string	''
rel	string	''
img	string	'/images/image-4.jpeg'
alt	string	''
header	string	'Lorem ipsum dolor sit ametit.'
linkClass	string	'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
imgClass	string	'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg'
textClass	string	'flex flex-col justify-between p-4 leading-normal'
h3Class	string	'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white'
pClass	string	'mb-3 font-normal text-gray-700 dark:text-gray-400'

Related components

References

Flowbite Card