Card

New version v0.0.1 🚀

Customizable card components for Phoenix and Phoenix LiveView, offering flexible layouts with titles, media, content, and footers.

Installation:

mix mishka.ui.gen.component card

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Overview of the Phoenix and LiveView Card Component

The Mishka Chelekom Card component allows you to create flexible and customizable card layouts for displaying content such as images, text, and actions. It's a versatile component that can be tailored to match different design needs, providing an organized and visually appealing structure. For enhanced functionality, the Card Footer and Card Title components offer additional sections for displaying actionable elements and highlighting important information, making this module ideal for content presentation in various contexts. The Card component integrates seamlessly with Phoenix and Phoenix LiveView.

This Phoenix LiveView component offers a wide range of customization options, including support for different sizes, colors, and variants. You can add media, text, and buttons, adjust the padding and spacing, and even combine multiple cards for a more detailed layout. These features make the Card component a highly adaptable tool that can easily fit into any design system while boosting the visual presentation of content.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

Default Variant

The default style of the Mishka Chelekom card applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles. Default variant have also white and dark colors which are the same colors in the dark and light mode.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural"></.card>
<.card color="white"></.card>
<.card color="dark"></.card>
<.card color="primary"></.card>
<.card color="secondary"></.card>
<.card color="success"></.card>
<.card color="warning"></.card>
<.card color="danger"></.card>
<.card color="info"></.card>
<.card color="silver"></.card>
<.card color="misc"></.card>
<.card color="dawn"></.card>

Outline Variant

The outline style of the Mishka Chelekom card features a border. Using a single setting, you can choose from various color variants to suit your design needs.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural" variant="outline"></.card>
<.card color="primary" variant="outline"></.card>
<.card color="secondary" variant="outline"></.card>
<.card color="success" variant="outline"></.card>
<.card color="warning" variant="outline"></.card>
<.card color="danger" variant="outline"></.card>
<.card color="info" variant="outline"></.card>
<.card color="silver" variant="outline"></.card>
<.card color="misc" variant="outline"></.card>
<.card color="dawn" variant="outline"></.card>

Shadow Variant

The shadow variant of the Mishka Chelekom card is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural" variant="shadow"></.card>
<.card color="primary" variant="shadow"></.card>
<.card color="secondary" variant="shadow"></.card>
<.card color="success" variant="shadow"></.card>
<.card color="warning" variant="shadow"></.card>
<.card color="danger" variant="shadow"></.card>
<.card color="info" variant="shadow"></.card>
<.card color="silver" variant="shadow"></.card>
<.card color="misc" variant="shadow"></.card>
<.card color="dawn" variant="shadow"></.card>

Bordered Variant

The Bordered variant of the Mishka Chelekom card has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural" variant="bordered"></.card>
<.card color="white" variant="bordered"></.card>
<.card color="dark" variant="bordered"></.card>
<.card color="primary" variant="bordered"></.card>
<.card color="secondary" variant="bordered"></.card>
<.card color="success" variant="bordered"></.card>
<.card color="warning" variant="bordered"></.card>
<.card color="danger" variant="bordered"></.card>
<.card color="info" variant="bordered"></.card>
<.card color="silver" variant="bordered"></.card>
<.card color="misc" variant="bordered"></.card>
<.card color="dawn" variant="bordered"></.card>

Transparent Variant

The transparent variant of the Mishka Chelekom card is similar to the default variant, but without border and background color.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural" variant="transparent"></.card>
<.card color="primary" variant="transparent"></.card>
<.card color="secondary" variant="transparent"></.card>
<.card color="success" variant="transparent"></.card>
<.card color="warning" variant="transparent"></.card>
<.card color="danger" variant="transparent"></.card>
<.card color="info" variant="transparent"></.card>
<.card color="silver" variant="transparent"></.card>
<.card color="misc" variant="transparent"></.card>
<.card color="dawn" variant="transparent"></.card>

Gradient Variant

The gradient variant of the Mishka Chelekom card has gradients in various colors.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card color="natural" variant="gradient"></.card>
<.card color="primary" variant="gradient"></.card>
<.card color="secondary" variant="gradient"></.card>
<.card color="success" variant="gradient"></.card>
<.card color="warning" variant="gradient"></.card>
<.card color="danger" variant="gradient"></.card>
<.card color="info" variant="gradient"></.card>
<.card color="silver" variant="gradient"></.card>
<.card color="misc" variant="gradient"></.card>
<.card color="dawn" variant="gradient"></.card>

Rounded prop in Phoenix LiveView card Component

The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large". These values control the border radius of the blcokquotes, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

Extra small radius

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Extra large radius

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card rounded="extra_small"></.card>
<.card rounded="small"></.card>
<.card rounded="medium"></.card>
<.card rounded="large"></.card>
<.card rounded="extra_large"></.card>

Border prop

The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large". These values control the border size of the cards, allowing you to adjust the thickness to suit your design. Additionally, you can use boolean props such as left_border, right_border, hide_border, and full_border to change the border position, add, or remove borders as needed for greater customization.

Extra small border

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Extra large border

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card border="extra_small"></.card>
<.card border="small"></.card>
<.card border="medium"></.card>
<.card border="large"></.card>
<.card border="extra_large"></.card>

Space prop

The space prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the vertical spacing between elements within the cards.

Extra small space within card

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Extra large space within card

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card space="extra_small"></.card>
<.card space="small"></.card>
<.card space="medium"></.card>
<.card space="large"></.card>
<.card space="extra_large"></.card>

Padding prop

The padding prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the padding around the content inside the cards.

Extra small padding within card

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Extra large padding within card

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card padding="extra_small"></.card>
<.card padding="small"></.card>
<.card padding="medium"></.card>
<.card padding="large"></.card>
<.card padding="extra_large"></.card>

Card font weight prop

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the card's title. This provides flexibility in ensuring the title stands out appropriately within the overall card layout.

Font bold

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Font light

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible.

<.card class="font-thin"></.card>
<.card class="font-extrasilver"></.card>
<.card class="font-silver"></.card>
<.card class="font-normal"></.card>
<.card class="font-medium"></.card>
<.card class="font-semibold"></.card>
<.card class="font-bold"></.card>
<.card class="font-extrabold"></.card>
<.card class="font-black"></.card>

Card content component

The card_content component is a flexible and customizable section within the Card component, designed to display the main content of your card. It can hold any type of content, including text, images, and other elements, making it ideal for showcasing detailed information or media. The card_content component supports customizable padding, spacing, and layout options, allowing you to tailor the presentation to fit your design needs. Whether you're creating product cards, profiles, or informational sections, card_content ensures a structured and visually appealing layout.

This is a small text inside the h3.

Another small text inside the first div.

Yet another small text inside the second div.

This is a small text inside the h3.

Another small text inside the first div.

Yet another small text inside the second div.

<.card class="your_classes">
  <.card_content>
    <h3>
      This is a small text inside the h3.
    </h3>

    <div>
      Another small text inside the first div.
    </div>

    <.button size="small" color="danger">
      a button within card content
    </.button>
  </.card_content>
</.card>

Card content space prop

The space attribute in the card_content component controls the spacing between items within the card content. By using predefined size values like extra_small, small, medium, and others, you can easily adjust the vertical space between elements inside the card. This allows for better visual organization and layout consistency, helping to create a clean and structured appearance within the card. The default spacing is set to extra_small, but it can be modified to fit the design needs of your project.

Extra small space

Another small text inside the first div.

Yet another small text inside the second div.

Extra large space

Another small text inside the first div.

Yet another small text inside the second div.

<.card class="your_classes">
  <.card_content space="extra_small" class="your_classes">
    <h3>This is a small text inside the h3.</h3>
  </.card_content>
</.card>

<.card class="your_classes">
  <.card_content space="small" class="your_classes">
    <h3>This is a small text inside the h3.</h3>
  </.card_content>
</.card>

<.card class="your_classes">
  <.card_content space="medium" class="your_classes">
    <h3>This is a small text inside the h3.</h3>
  </.card_content>
</.card>

<.card class="your_classes">
  <.card_content space="large" class="your_classes">
    <h3>This is a small text inside the h3.</h3>
  </.card_content>
</.card>

<.card class="your_classes">
  <.card_content space="extra_large" class="your_classes">
    <h3>This is a small text inside the h3.</h3>
  </.card_content>
</.card>

Card content padding prop

The padding attribute in the card_content component allows you to control the inner padding of the content, adjusting the space between the content and the edges of the card. With predefined values such as extra_small, small, medium, large, and extra_large, you can easily customize the padding to suit your design. Additionally, the none option allows for no padding if you prefer a tighter layout. The default value for padding is set to none, but it can be adjusted to ensure the appropriate spacing for various content types. The padding_size helper function converts the padding size into corresponding Tailwind CSS classes for consistent styling.

Extra small padding

Another small text inside the first div.

Yet another small text inside the second div.

Extra large padding

Another small text inside the first div.

Yet another small text inside the second div.

<!--When you want to add padding to card contetn set card padding to none-->

<.card class="your_classes" padding="none">
  <.card_content padding="extra_small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="medium" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="large" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="extra_large" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="none " class="your_classes"></.card_content>
</.card>

Card title component

Mishka Chelekom card

<.card class="your_card_classes">
  <!--Put any text or HTML Between title component-->
  <.card_title class="your_classes"></.card_title>
</.card>

Card title prop

The title prop in the card_title component specifies the main text for the card's title. It provides a clear and concise way to label the content of the card, ensuring a visually distinct header. By default, it is nil, but when set, it displays the provided title text, making it easy to add context and structure to your card's content.

Mishka Chelekom card title prop

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title" class="your_classes" />
</.card>

Card title component title prop

The icon prop in the card_title component allows you to display an icon alongside the title text. This prop enhances the visual appeal of the card by adding a recognizable symbol or graphic element next to the title, helping to reinforce the meaning or purpose of the card. By default, the icon prop is set to nil, but when provided, it integrates seamlessly with the title to create a more engaging and informative card header.

Mishka Chelekom card title prop

<.card class="your_card_classes">
  <!--Use any heroicons.com icons inside icon prop-->
  <.card_title title="Card title prop" icon="hero-home" />
</.card>

Card title component icon prop

The position prop in the card_title component allows you to control the alignment of the content within the card's title section. It supports values like start, end, center, between, and around, offering flexibility in how the title and any additional elements (like icons) are positioned. The default value is start, which aligns content to the left, but this can be adjusted to suit different design needs. For instance, using center will center the content, while between ensures even spacing between items within the title section, giving you full control over the layout of your card headers.

Mishka Chelekom card title

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title prop" position="start" />
</.card>

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title prop" position="center" />
</.card>

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title prop" position="end" />
</.card>

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title prop" position="between" />
</.card>

<.card class="your_card_classes">
  <.card_title title="Mishka Chelekom card title prop" position="around" />
</.card>

Card title component size prop

The size prop in the card_title component controls the overall size of the elements within the card's title section, affecting the font size, padding, and icon dimensions. The available sizes range from extra_small to extra_large, with the default being large. This allows you to tailor the visual prominence of the title based on the card's context or design requirements. For instance, using small will make the title more compact with smaller text and icon sizes, while extra_large will provide a more prominent and bold appearance. The flexibility of the size prop ensures that the title can seamlessly fit into any design layout, whether for compact cards or large, impactful headers.

Mishka Chelekom card title

<.card class="your_classes">
  <.card_content size="extra_small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes">
  <.card_content size="small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes">
  <.card_content size="medium" class="your_classes"></.card_content>
</.card>

<.card class="your_classes">
  <.card_content size="large" class="your_classes"></.card_content>
</.card>

<.card class="your_classes">
  <.card_content size="extra_large" class="your_classes"></.card_content>
</.card>

Card title component padding prop

The padding prop in the card_title component allows you to control the padding inside the title section. By adjusting the padding, you can control the space between the title content and the edges of the card, ensuring it fits well within the overall card design. The default value is none, meaning there is no extra padding applied, but you can modify this to add more space if needed, creating a cleaner, more spacious layout for the title. This flexibility helps you tailor the card title's appearance based on the design requirements of your application.

Mishka Chelekom card title

<!--When you want to add padding to card title set card padding to none-->
<.card class="your_classes" padding="none">
  <.card_content padding="extra_small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="small" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="medium" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="large" class="your_classes"></.card_content>
</.card>

<.card class="your_classes" padding="none">
  <.card_content padding="extra_large" class="your_classes"></.card_content>
</.card>

Card title component font weight prop

The font_weight prop in the card_title component controls the font weight of the title text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-semibold, giving the title a moderately bold appearance. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the card's title. This provides flexibility in ensuring the title stands out appropriately within the overall card layout.

Mishka Chelekom card title

<.card>
  <.card_title title="Title" class="font-thin" />
</.card>

<.card>
  <.card_title title="Title" class="font-extrasilver" />
</.card>

<.card>
  <.card_title title="Title" class="font-silver" />
</.card>

<.card>
  <.card_title title="Title" class="font-normal" />
</.card>

<.card>
  <.card_title title="Title" class="font-medium" />
</.card>

<.card>
  <.card_title title="Title" class="font-semibold" />
</.card>

<.card>
  <.card_title title="Title" class="font-bold" />
</.card>

<.card>
  <.card_title title="Title" class="font-extrabold" />
</.card>

<.card>
  <.card_title title="Title" class="font-black" />
</.card>

Card media component

The card_media component is designed to display media elements, such as images, within a card. It supports attributes like src for the image source and alt for a descriptive alternative text, ensuring accessibility and context for the media. The component provides flexibility through the rounded prop, which allows you to customize the border radius of the image, ensuring it fits well with different design aesthetics. Additionally, the class prop allows further customization, enabling you to apply custom styles or Tailwind CSS classes to control the appearance of the media. This component makes it easy to include responsive images or other media types in your card layout, enhancing the visual appeal and user experience.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

<.card>
  <.card_media src="/path"/>
  <.card_content>
    <!--Content goes here-->
  </.card_content>
</.card>

Card media src prop

The src prop in the card_media component is used to define the media source, such as the URL of the image that will be displayed inside the card. This prop is required, meaning the component will not function properly without specifying a valid media link. The src prop ensures that the appropriate media is rendered, whether it be an image or other media types, allowing you to visually enhance your card component with relevant content. By specifying the source, you enable the card_media component to seamlessly integrate media into your card's layout.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

<.card>
  <.card_media src="/path" />
</.card>

Card media alt prop

The alt prop in the card_media component provides a text description for the media being displayed, such as an image. This prop is important for accessibility, as it ensures that users who cannot view the image, including those using screen readers, can understand the content through the descriptive text. Additionally, the alt prop improves SEO by offering alternative text that can be indexed by search engines. While it's not required, it's highly recommended to include meaningful descriptions in the alt prop to enhance both accessibility and search visibility.

Mishka Chelekom is a comprehensive UI kit designed specifically for Phoenix and Phoenix LiveView applications.

<.card>
  <.card_media src="/path" alt="card_image" />
</.card>

Card media rounded prop

The rounded prop in the card_media component controls the border radius of the media, allowing you to adjust how rounded the edges of the image or media element appear. With values ranging from sizes like extra_small to extra_large, and the option for no rounding (default is nil), you can customize the appearance to fit different design styles. Whether you want sharp corners or smooth, rounded edges, the rounded prop gives you flexibility in defining the look and feel of the media within your card layout.

Card Media component

<.card>
  <.card_content>
    <.card_media src="/path" rounded="extra_small" />
    <.card_media src="/path" rounded="small" />
    <.card_media src="/path" rounded="medium" />
    <.card_media src="/path" rounded="large" />
    <.card_media src="/path" rounded="extra_large" />
  </.card_content>
</.card>

Card footer component

The card_footer component is used to define the footer section of a card, providing a space at the bottom for additional content such as actions, links, or supplementary information. It supports flexible customization options, including the ability to control the padding with the padding prop, ensuring the footer fits well within the overall card layout. You can also add custom CSS classes via the class prop to style the footer as needed. The footer acts as a container for nested content, allowing you to render any content inside it by utilizing the inner_block. This makes it a versatile component for including actions like buttons, text, or other elements that complement the card's content.

Content inside footer component

<.card>
  <.card_footer padding="large">
    Contne inside footer goes here
  </.card_footer>
</.card>

Card footer padding prop

The padding prop in the card_footer component controls the amount of space between the content inside the footer and its edges. You can adjust the padding by selecting from predefined sizes like extra_small, small, medium, or by choosing none to remove padding entirely. This allows for flexible design adjustments, ensuring the footer’s content is either closely aligned with the container or spaced out according to the desired visual structure. The default value is set to none, but it can be customized to fit the layout needs of your card component.

Extra small padding

<.card>
  <.card_footer padding="large">
    Contne inside footer goes here
  </.card_footer>
</.card>

Example of using card components

Mishka Chelekom

Mishka Chelekom ensures that all components are lightweight, responsive, and accessible. The UI kit is fully customizable, allowing you to adjust styling, layouts, and interactions using predefined props or custom CSS classes, including Tailwind CSS support. From color themes to flexible spacing options, Mishka Chelekom provides the tools to create engaging and user-friendly interfaces without sacrificing performance.

Mishka chelekom card component example image 2

Mishka chelekom card component example image 3

Mishka chelekom card component example image 4

<.card padding="small" rounded="large">
  <.card_title class="flex items-center gap-2 justify-between">
    <.link navigate="/path">Mishka Chelekom</.link>
  </.card_title>

  <.hr />

  <.card_content space="large" class="text-sm">
    <.card_media rounded="large" src="/path" rounded="large" alt=""/>

    <p>Descriptions</p>
    <p>Descriptions</p>

    <div class="grid grid-cols-3 gap-2">
      <.card_media src="/path" rounded="large" alt=""/>
      <.card_media src="/path" rounded="large" alt=""/>
      <.card_media src="/path" rounded="large" alt=""/>
    </div>
  </.card_content>

  <.hr />

  <.card_footer >
    <.button class="w-full" color="info">See more</.button>
  </.card_footer>
</.card>

More examples

Versatile

card

The Mishka card component is ideal for displaying content in a clean, organized layout. Whether for portfolios, product listings, or user profiles, it offers customizable options for size, color, and design. Perfect for enhancing your web projects with ease and flexibility.

Customizable

Flexible

Efficient

gallery

Card component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the card. Supported values: default, outline, transparent, shadow, bordered, gradient.
color	string	No	Determines the color theme of the card. Supported values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default is natural.The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
border	string	No	Determines the border style of the card. Default: extra_small.
rounded	string	No	Determines the border radius of the card.
space	string	No	Space between items inside the card.
font_weight	string	No	Determines the custom class for the font weight. Default: font-normal.
padding	string	No	Determines the padding for items inside the card.
class	string	No	Custom CSS class for additional styling.

Card Title component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
title	string	No	Specifies the title of the card element.
icon	string	No	Icon displayed alongside the title.
position	string	No	Determines the element position. Supported values: start, center, end, between, around. Default: start.
font_weight	string	No	Determines the font weight of the title. Default: font-semibold.
size	string	No	Determines the overall size of the title, including padding, font size, and other items. Supported values: extra_small, small, medium, large, extra_large. Default: large.
padding	string	No	Determines the padding for the title. Default: none.

Card Media component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
alt	string	No	Media link description, typically used as the alt text for images.
src	string	Yes	The media link, such as an image URL.
rounded	string	No	Determines the border radius of the media. Supported values: extra_small, small, medium, large, extra_large, nil.
class	string	No	Custom CSS class for additional styling.

Card Content component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
space	string	No	Space between items inside the card. Supported values: extra_small, small, medium, large, extra_large. Default: extra_small.
padding	string	No	Determines the padding for items inside the card. Supported values: extra_small, small, medium, large, extra_large, none. Default: none.
class	string	No	Custom CSS class for additional styling.

Card Footer component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
padding	string	No	Determines the padding for the footer section. Supported values: extra_small, small, medium, large, extra_large, none. Default: none.

Card CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - bordered	Yes
`--color`	string	natural - primary - secondary - success - warning - danger - info - silver - misc - dark - white - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--type`	string	card - card_title - card_media - card_content - card_footer	Yes
`--only`	string	card - card_title - card_media - card_content - card_footer	Yes
`--module`	string	Something	NO