The Avonni Card lets you create eye-catching, organized boxes to showcase your content. Think of it as a flexible building block—perfect for presenting information in a clean and engaging way
Last updated
Was this helpful?
Give your card a clear and concise title. This helps users understand the content at a glance. The title appears prominently at the top of the card and can summarize the information or highlight the main point.
Removing the title text from the card component will reveal a slot for adding custom content.
Enhance the visual appeal and provide context. Choose an icon that complements the card's content and reinforces the message. For example, a card displaying customer information might include a user icon.
Make your card more visually engaging. Include an image that relates to the card's content. You have flexible options for positioning the image:
Left, Top, Right, Bottom: Place the image alongside the text content.
Center: Position the image in the center of the card.
Background: Use the image as a background for the card.
Overlay: Overlay the image on top of the card's content.
What truly sets the Card component apart is its ability to contain other Avonni components. You can drag and drop components into the card's content and footer slots to create rich and interactive experiences. This allows you to:
Build complex layouts: Combine text, images, forms, buttons, and more within a single card.
Create interactive elements: Add buttons, links, and other interactive components to engage users.
Organize information: Structure content into clear and logical sections.
Present Information Effectively: Display content in a visually appealing and organized manner.
Enhance User Experience: Create engaging and interactive experiences.
Improve Readability: Break up long blocks of text and make content more digestible.
Create Visual Hierarchy: Structure your user interface with clear visual cues.
Product Cards: Showcase product details, images, and pricing.
Customer Profiles: Display customer information, contact details, and recent activity.
Dashboard Widgets: Present key metrics and data visualizations in an organized way.
News Articles: Display article summaries, images, and author information.
By leveraging the Card component and its mighty slots, you can create dynamic and engaging user interfaces that effectively present information and guide user interactions.
