vaadin · sissbruecker · Nov 25, 2025 · Nov 25, 2025 · Nov 25, 2025 · Nov 25, 2025
diff --git a/articles/components/accordion/index.adoc b/articles/components/accordion/index.adoc
@@ -3,8 +3,6 @@ title: Accordion
 page-title: Accordion component | Vaadin components
 description: Accordion is a vertically stacked set of expandable panels.
 meta-description: The Vaadin component Accordion is a vertically stacked set of expandable panels you can leverage in your application's layout
-tab-title: Usage
-layout: tabbed-page
 page-links:
   - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/accordion}/elements/vaadin-accordion[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/accordion/Accordion.html[Java]'
   - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/accordion}/packages/accordion[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-accordion-flow-parent[Java]'

diff --git a/articles/components/accordion/styling.adoc b/articles/components/accordion/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Accordion component.
 meta-description: Explore options to customize the appearance of the Accordion component in your Vaadin apps.
 order: 50
 ---
-= Styling
+= Accordion Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/app-layout/index.adoc b/articles/components/app-layout/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: App Layout
 page-title: App Layout component | Vaadin components
 description: App Layout is a component for building common application layouts.

diff --git a/articles/components/app-layout/styling.adoc b/articles/components/app-layout/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the App Layout component.
 meta-description: Customize the App Layout component in Vaadin to suit your application’s branding and style.
 order: 50
 ---
-= Styling
+= App Layout Styling
 
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]

diff --git a/articles/components/avatar/index.adoc b/articles/components/avatar/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Avatar
 page-title: Avatar component | Vaadin components
 description: Avatar is a graphical representation of an object or entity, for example, a person or an organization.

diff --git a/articles/components/avatar/styling.adoc b/articles/components/avatar/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Avatar and Avatar Group components.
 meta-description: Customize the appearance of the Avatar component in Vaadin applications.
 order: 50
 ---
-= Styling
+= Avatar Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/button/index.adoc b/articles/components/button/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Button
 page-title: Button Component | Vaadin components
 description: The Button component allows users to perform actions. It comes in several different style variants and supports icons, as well as text labels.

diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc
@@ -7,7 +7,7 @@ order: 50
 ---
 
 
-= Styling
+= Button Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/card/index.adoc b/articles/components/card/index.adoc
@@ -4,7 +4,6 @@ page-title: Card component | Vaadin components
 description: The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance.
 meta-description: The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance.
 version: since:com.vaadin:vaadin@V24.8
-layout: tabbed-page
 page-links:
   - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/card}/elements/vaadin-card[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/card/Card.html[Java]'
   - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/card}/packages/card[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-card-flow-parent[Java]'

diff --git a/articles/components/card/styling.adoc b/articles/components/card/styling.adoc
@@ -7,7 +7,7 @@ order: 50
 ---
 
 
-= Styling
+= Card Styling
 
 
 == Style Variants

diff --git a/articles/components/charts/basic-use.adoc b/articles/components/charts/basic-use.adoc
@@ -8,7 +8,7 @@ order: 3
 
 
 [[charts.basic-use]]
-= Basic Use
+= Charts – Basic Use
 
 The [classname]`Chart` class is a regular component which you can add to a layout. You can give the chart type in the constructor or set it later in the chart model.
 

diff --git a/articles/components/charts/styling/index.adoc b/articles/components/charts/styling/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: CSS Styling
-layout: tabbed-page
 title: Chart Styling
 page-title: How to customize Vaadin charts with CSS
 description: How to style a chart with CSS in your project.

diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc
@@ -7,7 +7,7 @@ order: 50
 ---
 
 
-= Styling
+= Charts Style Properties
 
 include::../../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/charts/timeline.adoc b/articles/components/charts/timeline.adoc
@@ -8,7 +8,7 @@ order: 8
 
 
 [[charts.timeline]]
-= Timeline
+= Chart Timeline
 
 A charts timeline feature allows selecting different time ranges for which to display the chart data, as well as navigating between such ranges. It's especially useful when working with large time <<basic-use#charts.basic-use.data, `series`>>.
 

diff --git a/articles/components/charts/usage-with-lit.adoc b/articles/components/charts/usage-with-lit.adoc
@@ -7,7 +7,7 @@ order: 11
 ---
 
 
-= Usage with Lit
+= Using Charts with Lit
 
 The sections that follow provide examples of certain Chart types with Lit.
 

diff --git a/articles/components/charts/usage-with-react.adoc b/articles/components/charts/usage-with-react.adoc
@@ -7,7 +7,7 @@ order: 10
 ---
 
 
-= Usage with React
+= Using Charts with React
 
 The sections that follow provide examples of certain Chart types with React.
 

diff --git a/articles/components/checkbox/index.adoc b/articles/components/checkbox/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Checkbox
 page-title: Checkbox component | Vaadin components
 description: How to use Checkbox, an input field for a binary choice and Checkbox Group to group related items.

diff --git a/articles/components/checkbox/styling.adoc b/articles/components/checkbox/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Checkbox component.
 meta-description: Customize the appearance of the Vaadin Checkbox component to align with your application’s theme.
 order: 50
 ---
-= Styling
+= Checkbox Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/combo-box/index.adoc b/articles/components/combo-box/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Combo Box
 page-title: Combo Box component | Vaadin components
 description: Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.

diff --git a/articles/components/combo-box/styling.adoc b/articles/components/combo-box/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Combo Box component.
 meta-description: Customize and style the Vaadin Combo Box component to fit your app's design system.
 order: 50
 ---
-= Styling
+= Combo Box Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/confirm-dialog/index.adoc b/articles/components/confirm-dialog/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Confirm Dialog
 page-title: Confirm Dialog component | Vaadin components
 description: Confirm Dialog is a modal Dialog used to confirm user actions.

diff --git a/articles/components/confirm-dialog/styling.adoc b/articles/components/confirm-dialog/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Confirm Dialog component.
 meta-description: Learn to style the Vaadin Confirm Dialog component with custom themes and CSS. Discover tips and examples for creating visually consistent and unique dialogs.
 order: 50
 ---
-= Styling
+= Confirm Dialog Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Context Menu
 page-title: Context Menu component | Vaadin components
 description: Context Menu is a component that can be attached to any component to display a context menu.

diff --git a/articles/components/context-menu/styling.adoc b/articles/components/context-menu/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Context Menu component.
 meta-description: Customize the Vaadin Context Menu component for an intuitive user interface.
 order: 50
 ---
-= Styling
+= Context Menu Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/crud/index.adoc b/articles/components/crud/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: CRUD
 page-title: CRUD component | Vaadin components
 description: CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items.

diff --git a/articles/components/crud/styling.adoc b/articles/components/crud/styling.adoc
@@ -5,7 +5,7 @@
 meta-description: Style the Vaadin CRUD component for a polished and user-friendly data management interface.
 order: 50
 ---
-= Styling
+= Crud Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/custom-field/index.adoc b/articles/components/custom-field/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Custom Field
 page-title: Custom Field component | Vaadin components
 description: Use Custom Field for wrapping multiple components as a single field.

diff --git a/articles/components/custom-field/styling.adoc b/articles/components/custom-field/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Custom Field component.
 meta-description: Learn to style the Vaadin Custom Field component to align with your application’s design requirements.
 order: 50
 ---
-= Styling
+= Custom Field Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/dashboard/index.adoc b/articles/components/dashboard/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Dashboard
 description: A component for building static dashboard layouts and dynamic, user-configurable dashboards.
 page-links:

diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc
@@ -3,7 +3,7 @@ title: Styling
 description: Styling API reference for the Dashboard component.
 order: 50
 ---
-= Styling
+= Dashboard Styling
 
 == Style Variants
 

diff --git a/articles/components/date-picker/date-formats.adoc b/articles/components/date-picker/date-formats.adoc
@@ -7,7 +7,7 @@ order: 60
 ---
 
 
-= Date Formats
+= Date Picker Formats
 
 Date Picker can be configured to display dates and parse user input in a specific format. In Flow, you can control the date format using <<using-java-locales-in-flow,Java locales>> or <<using-custom-date-formats-in-flow,custom date format patterns>>. The default format is based on the user's locale. In React and Lit, you can customize the date format with <<using-custom-functions-in-react-lit,custom functions>>. The default format is US English.
 

diff --git a/articles/components/date-picker/index.adoc b/articles/components/date-picker/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Date Picker
 page-title: Date Picker component | Vaadin components
 description: Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.

diff --git a/articles/components/date-picker/styling.adoc b/articles/components/date-picker/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Date Picker component.
 meta-description: Learn how to customize the appearance of the Vaadin Date Picker component.
 order: 50
 ---
-= Styling
+= Date Picker Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/date-time-picker/index.adoc b/articles/components/date-time-picker/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Date Time Picker
 page-title: Date Time Picker component | Vaadin components
 description: Date Time Picker is an input field for selecting both a date and a time.

diff --git a/articles/components/date-time-picker/styling.adoc b/articles/components/date-time-picker/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Date Time Picker component.
 meta-description: Customize the design of the Vaadin Date Time Picker component for a better user experience.
 order: 50
 ---
-= Styling
+= Date Time Picker Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/details/index.adoc b/articles/components/details/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Details
 page-title: Details component | Vaadin components
 description: Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered.

diff --git a/articles/components/details/styling.adoc b/articles/components/details/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Details component.
 meta-description: Customize the Vaadin Details component for a cohesive application user interface.
 order: 50
 ---
-= Styling
+= Details Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/dialog/index.adoc b/articles/components/dialog/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Dialog
 page-title: Dialog component | Vaadin components
 description: Dialog is a small window that can be used to present information and user interface elements in an overlay.

diff --git a/articles/components/dialog/styling.adoc b/articles/components/dialog/styling.adoc
@@ -6,7 +6,7 @@ meta-description: Customize the Vaadin Dialog component to match your applicatio
 order: 50
 ---
 
-= Styling
+= Dialog Styling
 :toclevels: 2
 
 include::../_styling-section-intros.adoc[tag=selectors]

diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Email Field
 page-title: Email Field component | Vaadin components
 description: Email Field is an extension of Text Field that accepts only email addresses as input.

diff --git a/articles/components/email-field/styling.adoc b/articles/components/email-field/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Email Field component.
 meta-description: Customize the Vaadin Email Field component with CSS to match your application's theme. Learn tips for enhancing user input fields.
 order: 50
 ---
-= Styling
+= Email Field Styling
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 

diff --git a/articles/components/form-layout/index.adoc b/articles/components/form-layout/index.adoc
@@ -3,8 +3,6 @@ title: Form Layout
 page-title: Form Layout component | Vaadin components
 description: Using Form Layout to build responsive forms with multiple columns and better positioned input labels.
 meta-description: Use the Form Layout component in Vaadin to create responsive and structured forms.
-tab-title: Usage
-layout: tabbed-page
 page-links:
   - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/form-layout}/elements/vaadin-form-layout[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/formlayout/FormLayout.html[Java]'
   - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/form-layout}/packages/form-layout[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-form-layout-flow-parent[Java]'

diff --git a/articles/components/form-layout/styling.adoc b/articles/components/form-layout/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Form Layout component.
 meta-description: Customize the Vaadin Form layout component to match your application's style and improve user experience.
 order: 50
 ---
-= Styling
+= Form Layout Styling
 
 include::../_styling-section-intros.adoc[tag=properties]
 

diff --git a/articles/components/grid-pro/index.adoc b/articles/components/grid-pro/index.adoc
@@ -1,6 +1,4 @@
 ---
-tab-title: Usage
-layout: tabbed-page
 title: Grid Pro
 page-title: Grid Pro component | Vaadin components
 description: Grid Pro, an extension of Grid, provides inline editing with full keyboard navigation.

diff --git a/articles/components/grid-pro/styling.adoc b/articles/components/grid-pro/styling.adoc
@@ -5,7 +5,7 @@ description: Styling API reference for the Grid Pro component.
 meta-description: Learn to style the Grid Pro component for your Vaadin applications with examples and best practices.
 order: 50
 ---
-= Styling
+= Grid Pro Styling
 
 include::../_styling-section-intros.adoc[tag=selectors]
 

diff --git a/articles/components/grid/columns.adoc b/articles/components/grid/columns.adoc
@@ -6,7 +6,7 @@ order: 10
 ---
 
 
-= Columns
+= Grid Columns
 
 
 Column alignment, freezing (i.e. fixed positioning), grouping, headers and footers, visibility, and width can be configured. Users can be allowed to resize and reorder columns.

diff --git a/articles/components/grid/drag-drop.adoc b/articles/components/grid/drag-drop.adoc
@@ -6,7 +6,7 @@ order: 40
 ---
 
 
-= Drag & Drop
+= Grid Drag & Drop
 
 Grid supports drag-and-drop actions. This feature might be used, for example, to reorder rows and to drag rows between grids.
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ order: 50 @@
     ---
-    = Styling
+    = Button Styling
     include::../_styling-section-theming-props.adoc[tag=style-properties]
@@ Expand Down @@