Card

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.

Overview of the Phoenix and LiveView Card Component

LTR RTL

Preview

Aesthetic Photography

Light, composition, and creativity unite to craft unforgettable images.

Nature Photography

Nature

Discover Earth's untamed beauty through our lens: pristine landscapes, vibrant wildlife, and captivating moments frozen in time.

Nature Photography Made Simple

Capture the magic of nature by shooting during golden hours, using a tripod for crisp shots, and framing with the rule of thirds. Let your creativity and the beauty around you shine through every click.

Read Article

Show the whole example Show less

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.

Base color and variant

The base variant and color offers a solid white background in light mode and a dark gray background in dark mode. These colors remain consistent across modes when using the default variant. The component also includes a border that matches the default variant and color styling.

<.card>
  <.card_content class="flex items-center flex-col justify-center h-full">

    <h2>Camping Responsibly to Preserve Nature’s Beauty</h2>

    <.button_link size="extra_small">Read more</.button_link>
  </.card_content>
</.card>

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.

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

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.

<.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>

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.

<.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>

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.

<.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>

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

<.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>

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

<.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>

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

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

  <.overlay color="dark" opacity="opaque">
    <.card_content class="flex items-center flex-col justify-center h-full">

      <h2>Camping Responsibly to Preserve Nature’s Beauty</h2>

      <.button_link size="extra_small">Read more</.button_link>
    </.card_content>
  </.overlay>
</.card>

If you want to create a card with overlayer, you can simply use Mishka Chelekom's Overlay component alongside with card_media of card and put it in the card component. This allows you to create interactive cards with overlay effects when hovering or focusing on the content.

Card with overlay

LTR RTL

Preview

Nature Photography Tips

Capture nature’s beauty by shooting during sunrise or sunset, using a tripod for stability, and applying the rule of thirds for balanced compositions. Experiment with angles and settings for unique, breathtaking shots.

Last updated 5 mins ago

Show the whole example Show less

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

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.

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

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.

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

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.

<.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.

<.card font_weight="font-thin"></.card>
<.card font_weight="font-extralight"></.card>
<.card font_weight="font-light"></.card>
<.card font_weight="font-normal"></.card>
<.card font_weight="font-medium"></.card>
<.card font_weight="font-semibold"></.card>
<.card font_weight="font-bold"></.card>
<.card font_weight="font-extrabold"></.card>
<.card font_weight="font-black"></.card>

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.

<.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>

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.

<.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>

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.

<!--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>

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.

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

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.

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

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.

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

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.

<.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>

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.

<.card class="your_classes">
  <.card_title title="Title" size="extra_small" class="your_classes" />
</.card>

<.card class="your_classes">
  <.card_title title="Title" size="small" class="your_classes" />
</.card>

<.card class="your_classes">
  <.card_title title="Title" size="medium" class="your_classes" />
</.card>

<.card class="your_classes">
  <.card_title title="Title" size="large" class="your_classes" />
</.card>

<.card class="your_classes">
  <.card_title title="Title" size="extra_large" class="your_classes" />
</.card>

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.

<!--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>

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.

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

<.card>
  <.card_title title="Title" font_weight="font-extralight" />
</.card>

<.card>
  <.card_title title="Title" font_weight="font-light" />
</.card>

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

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

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

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

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

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

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.

Card media component

LTR RTL

Preview

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.

Show the whole example Show less

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

By using the Mishka Chelekom video component, you can easily include videos as media in your project. Simply use the video component inside a card, and there you have it: a card with video media!

<.card>
  <.video controls>
    <:source src="/path" type="video/mp4" />
    <:source src="/path" type="video/webp" />
  </.video>

  <.card_content>
   Card Content
  </.card_content>
</.card>

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.

Card media src prop

LTR RTL

Preview

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

Show the whole example Show less

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

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.

Card media alt prop

LTR RTL

Preview

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

Show the whole example Show less

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

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 rounded prop

LTR RTL

Preview

Card Media component

Show the whole example Show less

<.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>

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.

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

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.

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

Example of using card components

Example of using card components

LTR RTL

Preview

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.

---

See more

Show the whole example Show less

<.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>