import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container">
    <Title>Card</Title>

    The Card component serves as a versatile container designed for flexible content presentation within user interfaces.
    Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.
    The Card is equipped with a slot that offers users the freedom to insert content in a manner that suits their application or webpage.

    <Subtitle>Usage</Subtitle>

    - Use card for stylish adaptability: customize and adapt the Card component to seamlessly integrate with the visual theme of your website or application.
    Its adaptability allows you to style it according to your preferences, ensuring a cohesive and appealing design.
    - Use card for organized content presentation: leverage the card's structured layout to neatly organize and present various content types, such as text, images, or interactive elements.
    Enhance the visual appeal of your interfaces while maintaining a well-organized presentation.
    - Use card for versatile applications: whether showcasing product details, presenting highlights, or displaying information in a structured manner, the Card component offers a 
    versatile solution for a wide range of UI contexts. Tailor it to suit your specific application needs.

    <Subtitle>👍 When to use</Subtitle>
    
    - When to opt for information presentation: choose the card component when aiming to present information in a visually organized and aesthetically pleasing manner.
    Its design enhances readability and user engagement, making it ideal for effective information presentation.
    - When to highlight features: opt for the card component when you need to highlight specific features or details. Its adaptable design allows for creative and attention-grabbing
    presentations, making it an excellent choice for showcasing important aspects.
    - When to embrace responsive design: choose the card for responsive design requirements. Its flexibility enables it to adapt seamlessly to different screen sizes and orientations,
    ensuring a consistent and user-friendly experience across various devices.
    - When to utilize customizable layouts: choose the card component when requiring a container with customizable layouts. Its slot mechanism empowers users to insert and arrange content
    elements according to their unique design preferences, providing a personalized touch to your UI.

    <Title>Properties</Title>

    <ArgTypes of="bq-card" />
  </div>
</div>
