Card

The Card component is a versatile UI element used to present content in a structured and visually appealing way. It supports various customizations, allowing you to adjust its layout, images, and styling to fit different use cases. Whether you need to display text, images, or a combination of both, the Card component provides a flexible solution.

Start by importing the Card component from the theui-svelte library:

<script>
  import { Card } from "theui-svelte";
</script>

Here's a simple demonstration of how to use the Card component. This example highlights how you can easily combine a title, images, and custom content to create a visually appealing card. You can further personalize it by tweaking the layout and styles using the available props.

Card Title

Explore our tools and resources designed to help you grow. Stay connected and enjoy the journey!

Submit

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}
</script>

<Card title="Card Title" topImage={imgData}>
  <p>Explore our tools and resources designed to help you grow. Stay connected and enjoy the journey!</p>
  <div>
    <Button>Submit</Button>
  </div>
</Card>

Alternatively you can use related snippet for the card item like title and images.

<Card>
  {#snippet topImage()}
    <img class="block w-full rounded-t-md" src="..." alt="...">
  {/snippet}

  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}

  <p>Explore our tools and resources designed to help you grow. Stay connected and enjoy the journey!</p>
  <div>
    <Button label="Submit" />
  </div>
</Card>

There are some prefix elements in the Card component. The example are showing below.

<Card title="Card Title">
  ...
</Card>

<Card>
  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}
</Card>

Card's Top Image

Use either the topImage prop or topImage snippet to add image at the top in the Card component.

Card Title

This is card content..

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}

<Card title="Card Title" topImage={imgData}>
  ...
</Card>

Card's Bottom Image

Use either the bottomImage prop or bottomImage snippet to add image at the top in the Card component.

Card Title

This is card content..

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}
</script>

<Card title="Card Title" bottomImage={imgData}>
  ...
</Card>

<Card>
  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}

  {#snippet topImage()}
    <img class="block w-full rounded-t-md" src="..." alt="...">
  {/snippet}

  <p>This is card content..</p>
</Card>

<Card>
  <p>This is card content..</p>
</Card>

The Card component supports a flexible layout option that allows you to switch between vertical and horizontal orientations, depending on your design needs. To adopt a horizontal layout for the Card component, simply add the horizontal attribute. When this attribute is present, the card's content will be arranged side by side, making it ideal for designs where a wide layout is preferred.

Card Title

This is card content..

Svelte

<Card horizontal>
  <p>This is card content..</p>
</Card>

The Card component is easy to customize, letting you style it to match your needs. You can change how any part of the card looks. Whether it's the content, title, shadow, or shape, you have full control.

You can either use snippets for custom components or utilize these props directly for more straightforward customization. Here are the key props available for customization:

• class: Apply custom styles to the card's container.
• contentClasses: Apply custom styles to the card's content.
• titleClasses: Style the title with your preferred classes.
• shadow: Adjust the card's shadow for a more or less prominent effect.
• rounded: Control the card's border-radius to achieve the desired shape.

<Card
  class="border-2 border-green-500 bg-green-100"
  titleClasses="bg-green-500 p-2 rounded-md text-green-50"
  contentClasses="text-green-500"
  shadow="none"
  rounded="xl"
  title="Card Title"
>
  <p>This is card content..</p>
</Card>