Widgets: neutral kit

This widget block offers a set of neutral, light-themed widgets designed to work with your application's theme builder settings. They automatically adjust to your theme’s colors, fonts, and styles, providing consistency throughout your application. When you update your theme, these widgets reflect those changes without any extra effort.

How do I find and use widgets?

The 'Betty Blocks neutral kit' consists of 34 single widgets that you can add to your application's front end once you've installed the block from the Block Store. 

Now, go to the Pages segment of your application and notice the set of widgets has appeared in the Widgets tab:

Let's now overview all the single widgets the Betty Blocks neutral kit consists of (divided by types):

Page examples 

A collection of pre-designed structures provides a solid kickstart in building your application's user interface by offering common layouts and components for various use cases. 

Client detail page	This widget offers a comprehensive view of individual clients. It features the client's name as a title, detailed information in a paragraph format, and key performance indicators like new and total projects. Below, tabs and expansion panels provide further details (open on a new page you select via options).
Detail page with pointers	Ideal for showing specific records like projects, this page presents key information such as dates and assigned entities. Navigation is provided with tabs to explore related client/user data and document details, complemented by a sidebar for easy access to other relevant sections within the application.
Overview page	This versatile widget provides a general summary with a title, introductory paragraph, and dedicated image area. Organized information is further presented through a tab, allowing for the display of tables, charts, and other data visualizations for a clear and concise overview of a topic.
Stepper page	This page guides users through a multi-step process, presenting information sequentially. Navigataion is done via 'Previous' and 'Next' buttons.

Page structure

Foundational layouts for building your application pages with different arrangements of elements like headers, footers, and sidebars, coupled with a central content area that you can customize with your specific information and widgets.

Header, content & footer area	A clear page layout with dedicated sections for a header (top menu for branding and navigation), a central content area for the main information, and a footer (often used for copyright or secondary links).
Side menu & content area	This structure features a sidebar, ideal for primary navigation or filtering options, positioned alongside a content area.
Top bar & side menu	This widget offers dual navigation with a top bar for quick actions and a side menu for more extensive, hierarchical options alongside the main content.

Layout

Layout widgets provide options for content organization through various column structures: from single-column layouts to more complex four-column arrangements. These widgets feature rounded corners and adjustable background colors.

1 column

2 columns

2 columns (left smaller)

3 columns

4 columns

Navigation

The Navigation segment offers the key elements for user navigation in your application. Create clear pathways with menus, guide users through sequences with horizontal and vertical steppers, and organize content with tabs or buttons for an intuitive experience.

Menu item	The Menu item widget creates individual navigation links that direct users to specific pages within your application. Use it to build clear and intuitive menus for seamless intra-app navigation.
Stepper (horizontal)	This horizontal stepper visually guides users through a sequence of steps. Easily add more steps (by duplicating the existing ones) and add the content of each by simply clicking on them.
Stepper (vertical)	Similar to its horizontal counterpart, this vertical stepper presents a sequence of steps in a downward flow. Duplicate steps as needed and edit individual step content with a click, ideal for structured, linear workflows.
Tabs / Buttons	This widget allows you to organize content into distinct tabs for easy section switching. It can also be configured to function as a group of individual button elements for various actions.

Content

This segment includes some commonly used widgets to display content on your application's pages: from interactive elements like checklists and expansion panels to visually engaging hero sections and structured text blocks. 

Checklist item	Display tasks, features, or any list of items with clear visual checkboxes, primarily used within the Data list component for interactive task management.
Expansion panel	Create collapsible sections to hide and reveal additional content on demand, allowing for a more organized and less cluttered user interface.
Hero	Design a visually impactful introductory section with a customizable background image (add via drag and drop) and the option to include one or multiple buttons.
Hero (side to side)	Present a balanced hero section featuring a title, descriptive paragraph, and a call-to-action button alongside a dedicated image on the right side.
Hero (stepper)	Implement a hero section that incorporates a stepper to guide users through a multi-step process directly within the introductory area.
Hero with pointers	Showcase key details for specific records, such as project dates and assigned entities, in a visually highlighted section.
Paragraph	Display blocks of text in a structured and readable format, ideal for presenting detailed information or descriptions.
Title	Use clear and hierarchical headings to provide context and structure to your page content.
Title and paragraph	Introduce sections or provide detailed explanations with a prominent heading followed by a descriptive paragraph.
Title with button	Combine a clear heading with a call-to-action button for immediate user interaction within a specific section.

Cards

A collection of visually distinct widgets designed to present information in organized blocks featuring images, titles, text, icons, and avatars.

Card	Display information concisely with an image and accompanying text.
Card with button	Highlight a specific concept or feature with a prominent icon enclosed in a circular frame.
Icon card	Highlight a specific concept or feature with a prominent icon enclosed in a circular frame.
Icon card 2	Showcase an icon within a modern rounded square frame to draw attention to key elements.
Icon card horizontal (pointer)	Present information horizontally with an icon, a clear title, and a descriptive subtitle.
Pointer card	This card widget highlights specific information with a clear title and accompanying content, drawing attention to key details or records.
Profile card	Display user information with a personal avatar, name (title), and additional details (subtitle).

Looking for a specific widget? Look into building more of your own solutions by reading the Create a custom widget article, or reach out to our community!