Resources You can use these components by accessing the provided resource files.

View Design View Code

Usage of ContentCard

The package is already installed in the repository's shell. To use the component, you only need to add the following code:

<BCardContent />

Attributes of ContentCard

If there is a question mark ? in the Data Type, it means that the properties are optional.

Usage of CardSection

The package is already installed in the repository's shell. To use the component, you only need to add the following code:

<BCardSection />

Attributes of CardSection

Usage of CardProfile

The package is already installed in the repository's shell. To use the component, you only need to add the following code:

<BCardProfile />

Attributes of CardProfile

Radius

The Cards component supports the following radius:

Shadow

The Cards component supports the following variants:

Border Color

The Cards component supports the following bodercolor:

Resources

• You can use these components by accessing the provided resource files.
• Preview animations are examples and may not suit Mobile Widgets. Press 'View Code' to access the Widgetbook Playground and see the Flutter widget displaying all created components and interactive.

View Design View Code

Usage

Import this line to your file:

import 'package:buma_design_system/buma_design_system.dart';

Attributes of all variants

If there is a question mark ? in the Data Type, it means that the properties are optional, this is namedConstructor from UICardMenu etc.

UICardMenu.base

• Suitable for displaying content with a mix of visual and textual details
• Allows users to interact with the content and, potentially, mark it as a favorite

UICardMenu.fullbox

• Best for content that needs more visual emphasis or additional detail
• Suitable for showcasing highlights, previewing content, or emphasizing specific elements

UICardMenu.small

• Useful for lists or areas where space is limited but interactivity is needed
• Suitable for displaying concise content or options while retaining a clean look

UICardMenu.tiny

• Best for very compact spaces, where only minimal information needs to be displayed
• Suitable for displaying concise content or options while retaining a clean look

UICardSection

• Useful for grouping related content, such as a list of items, tasks, or categories
• Can support expandable or collapsible functionality for better space management

UICardProfile

• Best for displaying user information concisely while allowing users to expand for more details
• Useful for user management screens, team overviews, or customer profiles

UICardAccordion

• Great for showing/hiding additional details
• Ideal for menus, FAQs, or multi-step processes

UICardValue

• Highlights important data or values at a glance
• On this card the content has a list of key values
• And has 2 additional optional buttons below it

UICardSummary

• Suitable for overviews of data or progress
• On this card the content has a list of key values
• And has 2 additional optional buttons below it

UICardNavigation

• Ideal for navigation menus or toolbars
• Helps users quickly switch between different app sections

Previews & Code

You can call the components with Class.namedConstructor() with different variants

Card Base

 UICardMenu.base(
   icon: Image.asset(),
   title: 'Label',
   subTitle: 'Label',
   enabled: true,
   isFavorite: _isFavorite,
   valueHint: 1,
   onTapFavorite: (){
     // Do something
   },
   onTap: (){
     // Do something
   }
 )

Card Fullbox

 UICardMenu.fullbox(
   banner: Image.asset(),
   title: 'Label',
   subTitle: 'Label',
   enabled: true,
   isFavorite: _isFavorite,
   valueHint: 1,
   onTapFavorite: (){
     // Do something
   },
   onTap: (){
     // Do something
   }
 )

Card Small

 UICardMenu.base(
   icon: Image.asset(),
   title: 'Label',
   subTitle: 'Label',
   enabled: true,
   isFavorite: _isFavorite,
   valueHint: 1,
   onTapFavorite: (){
     // Do something
   },
   onTap: (){
     // Do something
   }
 )

Card Tiny

 UICardMenu.tiny(
   icon: Image.asset(),
   title: 'Label',
   subTitle: 'Label',
   enabled: true,
   onTap: () {
     // Do something
   }
 )

Card Section

UICardSection(
  title: 'Label',
  secondaryButton: UICardSecondaryButton(
    label: 'Label',
    onTap: () {
      // Do something
    },
  ),
  child: Widget()
)

Card Profile

UICardProfile.large(
  email: 'example@mail.com',
  additionalInfo: 'Function',
  cover: Widget(),
  avatar: UIAvatarItem(name: 'Name'),
  primaryButton: UICardButton(
    label: 'Label'
  ),
)

Card Accordion

 UICardAccordion.colored(
  title : 'Title Label',
  type: UILabelType.body,
  child: Widget()
)

Card Value

UICardValue(
  icon: Icons.flight,
  title: 'Title Card',
  values: List.generate(
    10,
    (index) => UICardItem(
      label: 'Label',
      value: 'Example index',
    ),
  ),
  badgeLabel: 'Badge Label',
  leftButton: UICardButton(
    label: 'Label',
    onTap: (){
      // Do something
    }
  ),
  rightButton: UICardButton(
    label: 'Label',
    onTap: (){
      // Do something
    },
  ),
)

Card Summary

  // Solid:
 UICardSummary.solid(
   title: 'Title',
   label: 'Label',
   desc: 'Example Description',
   additionalInfo: 'Information',
   icon: Icons.flight,
   color: UICardSummaryColor.green,
   onTap: (){
     // Do something
   }
)

Card Navigation

UICardNavigation(
  menus: [
    UICardNavigationMenu(
      title: 'Title',
      icon: Icons.flight,
      label: 'Label',
      desc: 'Description',
    ),
  ],
  onTap: (int index) {
    // Do something
  }
)