From b85a95b282af090454aeee8cea4620b930d5b8fe Mon Sep 17 00:00:00 2001
From: Lukas Weiss <lukas.weiss@aboutbits.it>
Date: Mon, 1 Aug 2022 15:41:50 +0200
Subject: [PATCH] Adapt section components to new design

* adapt sections to new design
* adapt section filters and search to new design
* remove the section filter dialog component and add it as an example
* move the section filter component into the section/header
* add row and group components for section header
* add section-header-spacer component
* make id only required for form fields if label is set
* remove section-action component, use button components instead
---
 .eslintignore                                 |   2 -
 .gitignore                                    |   2 -
 package.json                                  |   2 -
 src/components/action/theme.ts                |   2 +-
 src/components/button/index.ts                |   2 +
 .../dialog/DialogSectionContainer.tsx         |  20 +
 src/components/dialog/index.ts                |   1 +
 .../dialog/select/SelectDialog.stories.mdx    |  19 +-
 src/components/dialog/theme.ts                |   3 +
 src/components/form/Input.tsx                 |  29 +-
 src/components/form/Select.tsx                |  37 +-
 src/components/form/SelectMonth.tsx           |  18 +-
 src/components/form/SelectYear.tsx            |  12 +-
 src/components/form/TextArea.tsx              |  29 +-
 .../form/async/SelectItem.stories.mdx         |   5 +-
 .../form/async/SelectItemDialogWithSearch.tsx |  87 +--
 src/components/form/index.ts                  |   1 +
 src/components/form/theme.ts                  |   5 +-
 src/components/loading/LoadingDetails.tsx     |  17 +-
 src/components/loading/LoadingEdit.tsx        |  17 +-
 src/components/loading/LoadingList.tsx        |  17 +-
 src/components/pagination/theme.ts            |   2 +-
 .../Section/SectionContainer.stories.mdx      |  34 ++
 .../section/Section/SectionContainer.tsx      |  15 +
 .../Section/SectionContentTwoColumn.tsx       |   7 +-
 .../Section/SubsectionTitle.stories.mdx       |  26 +
 .../section/Section/SubsectionTitle.tsx       |  16 +
 .../SectionFooter/SectionFooter.stories.mdx   |   4 +-
 .../SectionHeader/SectionAction.stories.mdx   |  31 -
 .../section/SectionHeader/SectionAction.tsx   |  44 --
 .../SectionHeader/SectionFilter.stories.mdx   | 125 ++++
 .../section/SectionHeader/SectionFilter.tsx   |  28 +
 .../SectionHeader/SectionHeader.stories.mdx   |   6 +-
 .../SectionHeaderGroup.stories.mdx            |  51 ++
 .../SectionHeader/SectionHeaderGroup.tsx      |  32 +
 .../SectionHeaderRow.stories.mdx              |  52 ++
 .../SectionHeader/SectionHeaderRow.tsx        |  35 ++
 .../SectionHeaderSpacer.stories.mdx           |  47 ++
 .../SectionHeader/SectionHeaderSpacer.tsx     |  24 +
 .../SectionHeader/SectionSearch.stories.mdx   |  32 +-
 .../section/SectionHeader/SectionSearch.tsx   |  85 +--
 .../SectionDescriptionItem.stories.mdx        |  18 +-
 .../section/SectionItem/SectionItem.tsx       |  14 +-
 .../SectionItem/SectionListItem.stories.mdx   |  22 +-
 .../SectionListItemButton.stories.mdx         |  23 +-
 .../SectionListItemLink.stories.mdx           |  24 +-
 .../SectionListItemWithAction.stories.mdx     |  52 +-
 src/components/section/index.ts               |   7 +-
 src/components/section/theme.ts               |  74 ++-
 src/components/sectionFilter/FilterDialog.tsx |  43 --
 .../sectionFilter/SectionFilter.stories.mdx   | 133 -----
 .../sectionFilter/SectionFilter.tsx           | 103 ----
 .../sectionFilter/SectionFilterAction.tsx     |  32 -
 src/components/sectionFilter/index.ts         |   2 -
 src/examples/details.stories.mdx              |  78 ++-
 src/examples/form.stories.mdx                 | 121 ++--
 src/examples/list.stories.mdx                 | 557 +++++++++++++++---
 src/sectionFilter.ts                          |   1 -
 src/translations/shared.en.json               |   2 -
 tailwind.config.js                            |   1 +
 60 files changed, 1489 insertions(+), 841 deletions(-)
 create mode 100644 src/components/dialog/DialogSectionContainer.tsx
 create mode 100644 src/components/section/Section/SectionContainer.stories.mdx
 create mode 100644 src/components/section/Section/SectionContainer.tsx
 create mode 100644 src/components/section/Section/SubsectionTitle.stories.mdx
 create mode 100644 src/components/section/Section/SubsectionTitle.tsx
 delete mode 100644 src/components/section/SectionHeader/SectionAction.stories.mdx
 delete mode 100644 src/components/section/SectionHeader/SectionAction.tsx
 create mode 100644 src/components/section/SectionHeader/SectionFilter.stories.mdx
 create mode 100644 src/components/section/SectionHeader/SectionFilter.tsx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderGroup.stories.mdx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderGroup.tsx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderRow.stories.mdx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderRow.tsx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderSpacer.stories.mdx
 create mode 100644 src/components/section/SectionHeader/SectionHeaderSpacer.tsx
 delete mode 100644 src/components/sectionFilter/FilterDialog.tsx
 delete mode 100644 src/components/sectionFilter/SectionFilter.stories.mdx
 delete mode 100644 src/components/sectionFilter/SectionFilter.tsx
 delete mode 100644 src/components/sectionFilter/SectionFilterAction.tsx
 delete mode 100644 src/components/sectionFilter/index.ts
 delete mode 100644 src/sectionFilter.ts

diff --git a/.eslintignore b/.eslintignore
index 217980f5..ae69b43b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -35,8 +35,6 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
-sectionFilter.js
-sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js
diff --git a/.gitignore b/.gitignore
index 509e6b7c..e3e7997f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,8 +66,6 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
-sectionFilter.js
-sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js
diff --git a/package.json b/package.json
index 6d416eb2..de920b2b 100644
--- a/package.json
+++ b/package.json
@@ -123,8 +123,6 @@
     "pagination.d.ts",
     "section.js",
     "section.d.ts",
-    "sectionFilter.js",
-    "sectionFilter.d.ts",
     "selectDialog.js",
     "selectDialog.d.ts",
     "submitButton.js",
diff --git a/src/components/action/theme.ts b/src/components/action/theme.ts
index ad36d9ef..9061402d 100644
--- a/src/components/action/theme.ts
+++ b/src/components/action/theme.ts
@@ -1,6 +1,6 @@
 export default {
   action: {
-    base: 'flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 mx-4 lg:mx-0',
+    base: 'flex flex-col lg:flex-row gap-4',
     variant: {
       start: 'lg:justify-start',
       center: 'lg:justify-center',
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 46fa7621..908fcd87 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -1,4 +1,6 @@
+export * from './types'
 export * from './Button'
 export * from './ButtonLink'
 export * from './ButtonIcon'
 export * from './ButtonIconLink'
+export * from './SubmitButton'
diff --git a/src/components/dialog/DialogSectionContainer.tsx b/src/components/dialog/DialogSectionContainer.tsx
new file mode 100644
index 00000000..326e8ffe
--- /dev/null
+++ b/src/components/dialog/DialogSectionContainer.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { ReactElement } from 'react'
+import { useTheme } from '../../framework'
+import { ClassNameProps } from '../types'
+
+type Props = {
+  children?: ReactElement
+} & ClassNameProps
+
+export function DialogSectionContainer({
+  className,
+  children,
+}: Props): ReactElement {
+  const { dialog } = useTheme()
+  return (
+    <div className={classNames(dialog.sectionContainer.base, className)}>
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
index 431abe3c..0f7b47be 100644
--- a/src/components/dialog/index.ts
+++ b/src/components/dialog/index.ts
@@ -1,2 +1,3 @@
 export * from './confirmation/ConfirmationDialog'
 export * from './DialogHeader'
+export * from './DialogSectionContainer'
diff --git a/src/components/dialog/select/SelectDialog.stories.mdx b/src/components/dialog/select/SelectDialog.stories.mdx
index f346e8be..c8e038e5 100644
--- a/src/components/dialog/select/SelectDialog.stories.mdx
+++ b/src/components/dialog/select/SelectDialog.stories.mdx
@@ -4,6 +4,7 @@ import { Button } from '../../button/Button'
 import { Tone } from '../../types'
 import { NavigationProvider } from '../../navigation/NavigationContext'
 import { SectionContentList, SectionListItem } from '../../section'
+import { DialogSectionContainer } from '../DialogSectionContainer'
 import { SelectDialog } from './SelectDialog'
 
 <Meta title="Components/Dialog/SelectDialog" component={SelectDialog} />
@@ -38,13 +39,17 @@ export const Template = ({
           onDismiss={() => setToggle(!toggle)}
           dialogLabel={dialogLabel}
         >
-          <SectionContentList>
-            {userList
-              .filter((user) => user.toLowerCase().includes(text.toLowerCase()))
-              .map((user, index) => (
-                <SectionListItem key={index}>{user}</SectionListItem>
-              ))}
-          </SectionContentList>
+          <DialogSectionContainer>
+            <SectionContentList>
+              {userList
+                .filter((user) =>
+                  user.toLowerCase().includes(text.toLowerCase())
+                )
+                .map((user, index) => (
+                  <SectionListItem key={index}>{user}</SectionListItem>
+                ))}
+            </SectionContentList>
+          </DialogSectionContainer>
         </SelectDialog>
       ) : (
         <Button tone={buttonTone} onClick={() => setToggle(!toggle)}>
diff --git a/src/components/dialog/theme.ts b/src/components/dialog/theme.ts
index ed3be4cb..86aaaf29 100644
--- a/src/components/dialog/theme.ts
+++ b/src/components/dialog/theme.ts
@@ -15,4 +15,7 @@ export default {
   header: {
     base: 'p-0 lg:p-4 bg-gray-300 border-b border-gray-600',
   },
+  sectionContainer: {
+    base: 'bg-white rounded-lg rounded-t-none',
+  },
 }
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index b6bee4db..da30d040 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -10,20 +10,29 @@ import { InputLabel } from './InputLabel'
 import { Variant, VariantProps } from './types'
 import { useCustomInputCss } from './useCustomInputCss'
 
-type Props = React.DetailedHTMLProps<
+type InputPropsBase = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 > &
   ModeProps &
   VariantProps & {
-    id: string
-    label?: string
     name: string
     iconStart?: ComponentType<IconProps>
     iconEnd?: ComponentType<IconProps>
   }
 
-export const Input = forwardRef<HTMLInputElement, Props>(
+type InputPropsWithoutLabel = InputPropsBase & {
+  label?: never
+}
+
+type InputPropsWithLabel = InputPropsBase & {
+  id: string
+  label: string
+}
+
+export type InputProps = InputPropsWithoutLabel | InputPropsWithLabel
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       label,
@@ -47,11 +56,13 @@ export const Input = forwardRef<HTMLInputElement, Props>(
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
         <div className={form.input.field}>
           {iconStart && (
             <InputIcon
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index 8531d329..852db6e4 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -1,23 +1,34 @@
+import classNames from 'classnames'
 import { useField } from 'formik'
 
 import React, { forwardRef } from 'react'
+import { useTheme } from '../../framework'
 import { Mode, ModeProps } from '../types'
 import { InputError } from './InputError'
 import { InputLabel } from './InputLabel'
 import { Variant, VariantProps } from './types'
 import { useCustomInputCss } from './useCustomInputCss'
 
-type SelectProps = React.DetailedHTMLProps<
+type SelectPropsBase = React.DetailedHTMLProps<
   React.SelectHTMLAttributes<HTMLSelectElement>,
   HTMLSelectElement
 > &
   ModeProps &
   VariantProps & {
-    id: string
-    label?: string
     name: string
   }
 
+type SelectPropsWithoutLabel = SelectPropsBase & {
+  label?: never
+}
+
+type SelectPropsWithLabel = SelectPropsBase & {
+  id: string
+  label: string
+}
+
+export type SelectProps = SelectPropsWithoutLabel | SelectPropsWithLabel
+
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (
     {
@@ -37,15 +48,23 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       variant
     )
     const [field] = useField(props.name)
+    const { form } = useTheme()
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
-        <select {...field} {...props} ref={ref} className={customCss.inputCss}>
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
+        <select
+          {...field}
+          {...props}
+          ref={ref}
+          className={classNames(form.select.base, customCss.inputCss)}
+        >
           {children}
         </select>
         <InputError name={props.name} className={customCss.errorCss} />
diff --git a/src/components/form/SelectMonth.tsx b/src/components/form/SelectMonth.tsx
index 364cccbe..f9ddc8cd 100644
--- a/src/components/form/SelectMonth.tsx
+++ b/src/components/form/SelectMonth.tsx
@@ -1,20 +1,10 @@
-import React, { forwardRef } from 'react'
-import { ClassNameProps, Mode, ModeProps } from '../types'
+import { forwardRef } from 'react'
+import { Mode } from '../types'
 import { useInternationalization } from '../../framework'
-import { Select } from './Select'
+import { Select, SelectProps } from './Select'
 import { Option } from './Option'
 
-type SelectMonthProps = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  HTMLSelectElement
-> &
-  ClassNameProps &
-  ModeProps & {
-    id: string
-    name: string
-    label?: string
-    className?: string
-  }
+type SelectMonthProps = SelectProps
 
 export enum Month {
   JANUARY = 'JANUARY',
diff --git a/src/components/form/SelectYear.tsx b/src/components/form/SelectYear.tsx
index fee18b69..2c119333 100644
--- a/src/components/form/SelectYear.tsx
+++ b/src/components/form/SelectYear.tsx
@@ -1,16 +1,10 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 import { Mode, ModeProps } from '../types'
-import { Select } from './Select'
+import { Select, SelectProps } from './Select'
 import { Option } from './Option'
 
-type Props = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  HTMLSelectElement
-> &
+type Props = SelectProps &
   ModeProps & {
-    id: string
-    label?: string
-    name: string
     from: number
     to: number
   }
diff --git a/src/components/form/TextArea.tsx b/src/components/form/TextArea.tsx
index ac06e8ed..72d3c587 100644
--- a/src/components/form/TextArea.tsx
+++ b/src/components/form/TextArea.tsx
@@ -6,14 +6,25 @@ import { InputLabel } from './InputLabel'
 import { useCustomInputCss } from './useCustomInputCss'
 import { Variant, VariantProps } from './types'
 
-type Props = React.DetailedHTMLProps<
+type TextAreaPropsBase = React.DetailedHTMLProps<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 > &
   ModeProps &
-  VariantProps & { id: string; label?: string; name: string }
+  VariantProps & { name: string }
 
-export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
+type TextAreaPropsWithoutLabel = TextAreaPropsBase & {
+  label?: never
+}
+
+type TextAreaPropsWithLabel = TextAreaPropsBase & {
+  id: string
+  label: string
+}
+
+export type TextAreaProps = TextAreaPropsWithoutLabel | TextAreaPropsWithLabel
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     { label, mode = Mode.light, variant = Variant.ghost, className, ...props },
     ref
@@ -28,11 +39,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
         <textarea
           {...field}
           {...props}
diff --git a/src/components/form/async/SelectItem.stories.mdx b/src/components/form/async/SelectItem.stories.mdx
index bcb39867..a9b36e68 100644
--- a/src/components/form/async/SelectItem.stories.mdx
+++ b/src/components/form/async/SelectItem.stories.mdx
@@ -3,7 +3,6 @@ import { action } from '@storybook/addon-actions'
 import { Formik } from 'formik'
 import * as Yup from 'yup'
 import { IndexType } from '@aboutbits/pagination'
-import { SectionContent } from '../../section'
 import { Form } from '../Form'
 import { SelectItem } from './SelectItem'
 import {
@@ -28,9 +27,7 @@ import {
           onSubmit={(values) => action('onSubmit')(values)}
         >
           <Form>
-            <SectionContent>
-              <Story />
-            </SectionContent>
+            <Story />
           </Form>
         </Formik>
       )
diff --git a/src/components/form/async/SelectItemDialogWithSearch.tsx b/src/components/form/async/SelectItemDialogWithSearch.tsx
index bf62e2e7..e8b1fd6a 100644
--- a/src/components/form/async/SelectItemDialogWithSearch.tsx
+++ b/src/components/form/async/SelectItemDialogWithSearch.tsx
@@ -15,6 +15,7 @@ import {
   SectionFooterWithPaginationInMemory,
 } from '../../pagination'
 import { LoadingListItem } from '../../loading'
+import { DialogSectionContainer } from '../../dialog'
 
 export type SearchQueryParameters = {
   search?: string
@@ -90,50 +91,52 @@ export function SelectItemDialogWithSearch<ItemType, Error>({
       onDismiss={onDismiss}
       dialogLabel={dialogLabel}
     >
-      <AsyncView
-        data={data}
-        error={error}
-        renderLoading={
-          <SectionContentList>
-            <LoadingListItem />
-            <LoadingListItem />
-            <LoadingListItem />
-          </SectionContentList>
-        }
-        renderSuccess={(data) => (
-          <>
+      <DialogSectionContainer>
+        <AsyncView
+          data={data}
+          error={error}
+          renderLoading={
             <SectionContentList>
-              {data.items.map((item, index) => (
-                <SectionListItemButton
-                  key={index}
-                  onClick={() => {
-                    onConfirm(item)
-                  }}
-                >
-                  <div className="flex flex-1 justify-between">
-                    {renderListItem(item)}
-                  </div>
-                </SectionListItemButton>
-              ))}
-              {data.items.length === 0 && (
-                <SectionContentListEmpty>{empty}</SectionContentListEmpty>
-              )}
+              <LoadingListItem />
+              <LoadingListItem />
+              <LoadingListItem />
             </SectionContentList>
-            <SectionFooterWithPaginationInMemory
-              page={data.currentPage}
-              size={data.perPage}
-              total={data.total}
-              onChangePage={actions.setPage}
-              config={paginationConfig}
-            />
-          </>
-        )}
-        renderError={(error) => (
-          <SectionContentListEmpty>
-            <Alert tone={Tone.critical}>{renderErrorMessage(error)}</Alert>
-          </SectionContentListEmpty>
-        )}
-      />
+          }
+          renderSuccess={(data) => (
+            <>
+              <SectionContentList>
+                {data.items.map((item, index) => (
+                  <SectionListItemButton
+                    key={index}
+                    onClick={() => {
+                      onConfirm(item)
+                    }}
+                  >
+                    <div className="flex flex-1 justify-between">
+                      {renderListItem(item)}
+                    </div>
+                  </SectionListItemButton>
+                ))}
+                {data.items.length === 0 && (
+                  <SectionContentListEmpty>{empty}</SectionContentListEmpty>
+                )}
+              </SectionContentList>
+              <SectionFooterWithPaginationInMemory
+                page={data.currentPage}
+                size={data.perPage}
+                total={data.total}
+                onChangePage={actions.setPage}
+                config={paginationConfig}
+              />
+            </>
+          )}
+          renderError={(error) => (
+            <SectionContentListEmpty>
+              <Alert tone={Tone.critical}>{renderErrorMessage(error)}</Alert>
+            </SectionContentListEmpty>
+          )}
+        />
+      </DialogSectionContainer>
     </SelectDialog>
   )
 }
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
index 786c6985..7116e094 100644
--- a/src/components/form/index.ts
+++ b/src/components/form/index.ts
@@ -9,3 +9,4 @@ export * from './SelectMonth'
 export * from './SelectYear'
 export * from './TextArea'
 export * from './useCustomInputCss'
+export * from './types'
diff --git a/src/components/form/theme.ts b/src/components/form/theme.ts
index d88fc5cf..279aa834 100644
--- a/src/components/form/theme.ts
+++ b/src/components/form/theme.ts
@@ -31,7 +31,7 @@ export default {
         },
         transparent: {
           normal:
-            'border-transparent focus:border-neutral-800 focus:outline-neutral-800',
+            'border-transparent focus:border-neutral-800 focus:outline-neutral-800 hover:bg-neutral-100 hover:border-neutral-100',
           error:
             'border-critical-500 focus:border-critical-500 focus:outline-critical-500',
           disabled: '',
@@ -105,6 +105,9 @@ export default {
       end: 'right-0 pr-3.5',
     },
   },
+  select: {
+    base: 'pr-9 text-ellipsis overflow-hidden',
+  },
   option: {
     base: 'bg-transparent',
     light: {
diff --git a/src/components/loading/LoadingDetails.tsx b/src/components/loading/LoadingDetails.tsx
index 5f0e54f9..9fb8460a 100644
--- a/src/components/loading/LoadingDetails.tsx
+++ b/src/components/loading/LoadingDetails.tsx
@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import {
   Section,
+  SectionContainer,
   SectionContentTwoColumn,
   SectionHeader,
   SectionTitle,
@@ -28,13 +29,15 @@ export function LoadingDetails({
         <SectionTitle>{sectionHeader}</SectionTitle>
       </SectionHeader>
 
-      <SectionContentTwoColumn>
-        {Array(numberOfItems)
-          .fill(null)
-          .map((_, index) => (
-            <LoadingDescriptionItem key={index} />
-          ))}
-      </SectionContentTwoColumn>
+      <SectionContainer>
+        <SectionContentTwoColumn>
+          {Array(numberOfItems)
+            .fill(null)
+            .map((_, index) => (
+              <LoadingDescriptionItem key={index} />
+            ))}
+        </SectionContentTwoColumn>
+      </SectionContainer>
     </Section>
   )
 }
diff --git a/src/components/loading/LoadingEdit.tsx b/src/components/loading/LoadingEdit.tsx
index 5ce0bf98..ef0dc688 100644
--- a/src/components/loading/LoadingEdit.tsx
+++ b/src/components/loading/LoadingEdit.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react'
 import {
   Section,
+  SectionContainer,
   SectionContentTwoColumn,
   SectionHeader,
   SectionTitle,
@@ -28,13 +29,15 @@ export function LoadingEdit({
         <SectionTitle>{sectionHeader}</SectionTitle>
       </SectionHeader>
 
-      <SectionContentTwoColumn>
-        {Array(numberOfItems)
-          .fill(null)
-          .map((_, index) => (
-            <LoadingInput key={index} />
-          ))}
-      </SectionContentTwoColumn>
+      <SectionContainer>
+        <SectionContentTwoColumn>
+          {Array(numberOfItems)
+            .fill(null)
+            .map((_, index) => (
+              <LoadingInput key={index} />
+            ))}
+        </SectionContentTwoColumn>
+      </SectionContainer>
     </Section>
   )
 }
diff --git a/src/components/loading/LoadingList.tsx b/src/components/loading/LoadingList.tsx
index 98e6e688..d1f91fed 100644
--- a/src/components/loading/LoadingList.tsx
+++ b/src/components/loading/LoadingList.tsx
@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from 'react'
 import {
   Section,
   SectionHeader,
+  SectionContainer,
   SectionContentList,
   SectionTitle,
 } from '../section'
@@ -28,13 +29,15 @@ export function LoadingList({
         <SectionTitle>{sectionHeader}</SectionTitle>
       </SectionHeader>
 
-      <SectionContentList>
-        {Array(numberOfItems)
-          .fill(null)
-          .map((_, index) => (
-            <LoadingListItem key={index} />
-          ))}
-      </SectionContentList>
+      <SectionContainer>
+        <SectionContentList>
+          {Array(numberOfItems)
+            .fill(null)
+            .map((_, index) => (
+              <LoadingListItem key={index} />
+            ))}
+        </SectionContentList>
+      </SectionContainer>
     </Section>
   )
 }
diff --git a/src/components/pagination/theme.ts b/src/components/pagination/theme.ts
index 713ea1ee..d0b32d01 100644
--- a/src/components/pagination/theme.ts
+++ b/src/components/pagination/theme.ts
@@ -4,7 +4,7 @@ export default {
   },
   prevNext: {
     icon: {
-      base: 'inline-block w-6 h-6 fill-current',
+      base: 'inline-block w-5 h-5 fill-current',
     },
     text: {
       base: 'hidden lg:block',
diff --git a/src/components/section/Section/SectionContainer.stories.mdx b/src/components/section/Section/SectionContainer.stories.mdx
new file mode 100644
index 00000000..31f0ad07
--- /dev/null
+++ b/src/components/section/Section/SectionContainer.stories.mdx
@@ -0,0 +1,34 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { SectionContainer, SectionContent } from '../'
+
+<Meta
+  title="Components/Section/SectionContainer"
+  component={SectionContainer}
+/>
+
+# SectionContainer
+
+In the default theme, this component is used to wrap the `SectionContent` and the `SectionFooter` with a border and rounded corners.
+
+export const Template = ({ children, ...args }) => (
+  <SectionContainer {...args}>{children}</SectionContainer>
+)
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      children: <SectionContent>Default Section Container</SectionContent>,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `section.container.base`: Define the styles of the section container.
diff --git a/src/components/section/Section/SectionContainer.tsx b/src/components/section/Section/SectionContainer.tsx
new file mode 100644
index 00000000..ebd6375b
--- /dev/null
+++ b/src/components/section/Section/SectionContainer.tsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames'
+import { ReactElement, ReactNode } from 'react'
+import { useTheme } from '../../../framework'
+import { ClassNameProps } from '../../types'
+
+type Props = { children?: ReactNode } & ClassNameProps
+
+export function SectionContainer({ children, className }: Props): ReactElement {
+  const { section } = useTheme()
+  return (
+    <div className={classNames(section.container.base, className)}>
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/section/Section/SectionContentTwoColumn.tsx b/src/components/section/Section/SectionContentTwoColumn.tsx
index 13c360c6..66a381a3 100644
--- a/src/components/section/Section/SectionContentTwoColumn.tsx
+++ b/src/components/section/Section/SectionContentTwoColumn.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
-import { SectionContent } from './SectionContent'
 
 export const SectionContentTwoColumn: React.FC<ClassNameProps> = ({
   children,
@@ -9,10 +8,8 @@ export const SectionContentTwoColumn: React.FC<ClassNameProps> = ({
 }) => {
   const { section } = useTheme()
   return (
-    <SectionContent
-      className={classNames(section.contentTwoColumn.base, className)}
-    >
+    <div className={classNames(section.contentTwoColumn.base, className)}>
       {children}
-    </SectionContent>
+    </div>
   )
 }
diff --git a/src/components/section/Section/SubsectionTitle.stories.mdx b/src/components/section/Section/SubsectionTitle.stories.mdx
new file mode 100644
index 00000000..ecb68b37
--- /dev/null
+++ b/src/components/section/Section/SubsectionTitle.stories.mdx
@@ -0,0 +1,26 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { SubsectionTitle } from './SubsectionTitle'
+
+<Meta title="Components/Section/SubsectionTitle" component={SubsectionTitle} />
+
+# SubsectionTitle
+
+This component is an HTML `h3` tag and defines the style of a subsection title to be used inside the `SectionContent`.
+
+export const Template = ({ children, ...args }) => (
+  <SubsectionTitle {...args}>{children}</SubsectionTitle>
+)
+
+<Canvas>
+  <Story name="Default" args={{ children: 'Profile information' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `section.subsectionTitle.base`: Define the styles for the subsection title.
diff --git a/src/components/section/Section/SubsectionTitle.tsx b/src/components/section/Section/SubsectionTitle.tsx
new file mode 100644
index 00000000..a4b15c49
--- /dev/null
+++ b/src/components/section/Section/SubsectionTitle.tsx
@@ -0,0 +1,16 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+import { useTheme } from '../../../framework'
+import { ClassNameProps } from '../../types'
+
+type Props = { children?: ReactNode } & ClassNameProps
+
+export function SubsectionTitle({ children, className }: Props) {
+  const { section } = useTheme()
+
+  return (
+    <h3 className={classNames(section.subsectionTitle.base, className)}>
+      {children}
+    </h3>
+  )
+}
diff --git a/src/components/section/SectionFooter/SectionFooter.stories.mdx b/src/components/section/SectionFooter/SectionFooter.stories.mdx
index e8bd246f..4ef523aa 100644
--- a/src/components/section/SectionFooter/SectionFooter.stories.mdx
+++ b/src/components/section/SectionFooter/SectionFooter.stories.mdx
@@ -5,7 +5,7 @@ import { SectionFooter } from '../index'
 
 # SectionFooter
 
-The section footer is component that should be placed at the bottom of a section.
+The section footer is a component that should be placed at the bottom of a `SectionContainer`.
 It is used as a container for the section footer where, for example, the pagination can be placed.
 
 export const Template = ({ children, ...args }) => (
@@ -13,7 +13,7 @@ export const Template = ({ children, ...args }) => (
 )
 
 <Canvas>
-  <Story name="Section Footer" args={{ children: 'Default Section Footer' }}>
+  <Story name="Default" args={{ children: 'Default Section Footer' }}>
     {Template.bind({})}
   </Story>
 </Canvas>
diff --git a/src/components/section/SectionHeader/SectionAction.stories.mdx b/src/components/section/SectionHeader/SectionAction.stories.mdx
deleted file mode 100644
index 3905f33a..00000000
--- a/src/components/section/SectionHeader/SectionAction.stories.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconFilterList from '@aboutbits/react-material-icons/dist/IconFilterList'
-import { action } from '@storybook/addon-actions'
-import { SectionAction } from './SectionAction'
-
-<Meta title="Components/Section/SectionAction" component={SectionAction} />
-
-# SectionAction
-
-This component defines an action that can be placed inside a `SectionHeader`.
-
-export const Template = ({ ...args }) => (
-  <SectionAction {...args} onClick={action('clicked')} />
-)
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{ Icon: IconFilterList, label: 'Filter', disabled: false }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-### Theme
-
-- `section.action.base`: Define the styles for the section action.
diff --git a/src/components/section/SectionHeader/SectionAction.tsx b/src/components/section/SectionHeader/SectionAction.tsx
deleted file mode 100644
index 65194af6..00000000
--- a/src/components/section/SectionHeader/SectionAction.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { ComponentType, ReactElement } from 'react'
-import classNames from 'classnames'
-import { IconProps } from '@aboutbits/react-material-icons/dist/types'
-import { useTheme } from '../../../framework'
-import { ClassNameProps } from '../../types'
-
-export type SectionActionProps = ClassNameProps & {
-  /**
-   * Defines icon of the action.
-   **/
-  Icon: ComponentType<IconProps>
-  /**
-   * Defines label of the action.
-   **/
-  label: string
-  /**
-   * On click handler for the button.
-   */
-  onClick: () => void
-  /**
-   * Defines if the action is disabled.
-   **/
-  disabled?: boolean | undefined
-}
-
-export function SectionAction({
-  Icon,
-  label,
-  onClick,
-  disabled,
-  className,
-}: SectionActionProps): ReactElement {
-  const { section } = useTheme()
-
-  return (
-    <button
-      className={classNames(section.action.base, className)}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <Icon title={label} className={section.action.icon} />
-    </button>
-  )
-}
diff --git a/src/components/section/SectionHeader/SectionFilter.stories.mdx b/src/components/section/SectionHeader/SectionFilter.stories.mdx
new file mode 100644
index 00000000..07a6b722
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionFilter.stories.mdx
@@ -0,0 +1,125 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { useState } from 'react'
+import { action } from '@storybook/addon-actions'
+import { Variant, Select } from '../../form'
+import {
+  Section,
+  SectionContainer,
+  SectionContentList,
+  SectionContentListEmpty,
+  SectionHeader,
+  SectionHeaderRow,
+  SectionHeaderGroup,
+  SectionListItemButton,
+  SectionTitle,
+  SectionFilter,
+} from '../'
+
+<Meta title="Components/Section/SectionFilter" component={SectionFilter} />
+
+# SectionFilter
+
+You can use the `SectionFilter` to create a filter on a specific section.
+This component is a form wrapper that submits automatically by default. You can disable auto-submit by passing `false` to the `autoSubmit` prop.
+
+Find more samples in the [List examples](/docs/examples-list--default-story).
+
+export const Template = ({ ...args }) => {
+  const [filter, setFilter] = useState(args.initialValues)
+  const content = Array.from(Array(10).keys())
+    .map((item, index) => ({
+      name: `User ${item + 1}`,
+      role: index % 8 === 0 ? 'ADMIN' : 'USER',
+      department: index % 3 === 0 ? 'HR' : 'SALES',
+    }))
+    .filter((item) => {
+      return (
+        (filter.role === '' || item.role === filter.role) &&
+        (filter.department === '' || item.department === filter.department)
+      )
+    })
+  return (
+    <Section>
+      <SectionHeader>
+        <SectionHeaderRow>
+          <SectionTitle>Users</SectionTitle>
+          <SectionFilter
+            className="flex"
+            {...args}
+            initialValues={filter}
+            onSubmit={(values) => setFilter(values)}
+          >
+            <SectionHeaderGroup>
+              <Select id="role" name="role" variant={Variant.transparent}>
+                <option className="bg-gray-600" value="">
+                  All roles
+                </option>
+                <option className="bg-gray-600" value="ADMIN">
+                  Admin
+                </option>
+                <option className="bg-gray-600" value="USER">
+                  User
+                </option>
+              </Select>
+              <Select
+                id="department"
+                name="department"
+                variant={Variant.transparent}
+              >
+                <option className="bg-gray-600" value="">
+                  All departments
+                </option>
+                <option className="bg-gray-600" value="HR">
+                  Human Resources
+                </option>
+                <option className="bg-gray-600" value="IT">
+                  Engineering
+                </option>
+                <option className="bg-gray-600" value="SALES">
+                  Sales
+                </option>
+              </Select>
+            </SectionHeaderGroup>
+          </SectionFilter>
+        </SectionHeaderRow>
+      </SectionHeader>
+      <SectionContainer>
+        <SectionContentList>
+          {content.map((item) => (
+            <SectionListItemButton key={item.name} onClick={action('clicked')}>
+              {`${item.name} (${item.role} - ${item.department})`}
+            </SectionListItemButton>
+          ))}
+          {content.length === 0 && (
+            <SectionContentListEmpty>
+              No users found in database.
+            </SectionContentListEmpty>
+          )}
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
+  )
+}
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      autoSubmit: undefined,
+      initialValues: {
+        role: '',
+        department: '',
+      },
+    }}
+    argTypes={{
+      onSubmit: { control: false },
+      children: { control: false },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
diff --git a/src/components/section/SectionHeader/SectionFilter.tsx b/src/components/section/SectionHeader/SectionFilter.tsx
new file mode 100644
index 00000000..cb041870
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionFilter.tsx
@@ -0,0 +1,28 @@
+import { Form, Formik, FormikConfig } from 'formik'
+import { ReactElement } from 'react'
+import { ClassNameProps } from '../../types'
+import { FormikAutoSubmit } from '../../form'
+
+type Props<T> = ClassNameProps &
+  FormikConfig<T> & {
+    /**
+     * If the form should submit automatically on change. Defaults to true.
+     */
+    autoSubmit?: boolean
+  }
+
+export function SectionFilter<T>({
+  className,
+  autoSubmit = true,
+  children,
+  ...props
+}: Props<T>): ReactElement | null {
+  return (
+    <Formik<T> {...props}>
+      <Form className={className}>
+        {autoSubmit && <FormikAutoSubmit />}
+        {children}
+      </Form>
+    </Formik>
+  )
+}
diff --git a/src/components/section/SectionHeader/SectionHeader.stories.mdx b/src/components/section/SectionHeader/SectionHeader.stories.mdx
index 8f8155ae..d87fafec 100644
--- a/src/components/section/SectionHeader/SectionHeader.stories.mdx
+++ b/src/components/section/SectionHeader/SectionHeader.stories.mdx
@@ -15,7 +15,9 @@ export const Template = ({ children, ...args }) => (
 <Canvas>
   <Story
     name="Default"
-    args={{ children: <SectionTitle>Profile information</SectionTitle> }}
+    args={{
+      children: <SectionTitle>Profile information</SectionTitle>,
+    }}
   >
     {Template.bind({})}
   </Story>
@@ -27,4 +29,4 @@ export const Template = ({ children, ...args }) => (
 
 ### Theme
 
-- `section.header.base`: Define the styles for the section heading.
+- `section.header.base`: Define the base styles for the section heading.
diff --git a/src/components/section/SectionHeader/SectionHeaderGroup.stories.mdx b/src/components/section/SectionHeader/SectionHeaderGroup.stories.mdx
new file mode 100644
index 00000000..8d3688b6
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderGroup.stories.mdx
@@ -0,0 +1,51 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import {
+  SectionHeaderGroup,
+  SectionHeaderGroupSpacing,
+} from './SectionHeaderGroup'
+
+<Meta
+  title="Components/Section/SectionHeaderGroup"
+  component={SectionHeaderGroup}
+/>
+
+# SectionHeaderGroup
+
+This component is a container for elements inside a SectionHeader or SectionHeaderRow and manages the spacings between the elements.
+
+export const Template = ({ children, ...args }) => (
+  <SectionHeaderGroup {...args}>{children}</SectionHeaderGroup>
+)
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      spacing: SectionHeaderGroupSpacing.sm,
+      children: (
+        <>
+          <div>Element1</div>
+          <div>Element2</div>
+        </>
+      ),
+    }}
+    argTypes={{
+      spacing: {
+        options: Object.values(SectionHeaderGroupSpacing),
+        control: { type: 'radio' },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `section.headerGroup.base`: Define the base styles for the header group.
+- `section.headerGroup.spacing.sm`: Define the styles for small spacing.
+- `section.headerGroup.spacing.md`: Define the styles for medium spacing.
diff --git a/src/components/section/SectionHeader/SectionHeaderGroup.tsx b/src/components/section/SectionHeader/SectionHeaderGroup.tsx
new file mode 100644
index 00000000..deaab0b6
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderGroup.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames'
+import { ReactElement, ReactNode } from 'react'
+import { useTheme } from '../../../framework'
+import { ClassNameProps } from '../../types'
+
+export enum SectionHeaderGroupSpacing {
+  sm = 'sm',
+  md = 'md',
+}
+
+export function SectionHeaderGroup({
+  spacing = SectionHeaderGroupSpacing.sm,
+  children,
+  className,
+}: {
+  spacing?: SectionHeaderGroupSpacing
+  children?: ReactNode
+} & ClassNameProps): ReactElement {
+  const { section } = useTheme()
+
+  return (
+    <div
+      className={classNames(
+        section.headerGroup.base,
+        section.headerGroup.spacing[spacing],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/section/SectionHeader/SectionHeaderRow.stories.mdx b/src/components/section/SectionHeader/SectionHeaderRow.stories.mdx
new file mode 100644
index 00000000..01f41d64
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderRow.stories.mdx
@@ -0,0 +1,52 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { SectionHeaderRow, SectionHeaderRowLayout } from './SectionHeaderRow'
+
+<Meta
+  title="Components/Section/SectionHeaderRow"
+  component={SectionHeaderRow}
+/>
+
+# SectionHeaderRow
+
+This component is a container for elements inside a `SectionHeader`.
+It manages the layout of the elements inside it. Choose between `stretch`, `spaceBetween`, `start`, `center` or `end`. It defaults to `spaceBetween`. `stretch` should only be used for a single element inside the container.
+
+export const Template = ({ children, ...args }) => (
+  <SectionHeaderRow {...args}>{children}</SectionHeaderRow>
+)
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      layout: SectionHeaderRowLayout.spaceBetween,
+      children: (
+        <>
+          <div>Element1</div>
+          <div>Element2</div>
+        </>
+      ),
+    }}
+    argTypes={{
+      layout: {
+        options: Object.values(SectionHeaderRowLayout),
+        control: { type: 'radio' },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `section.headerRow.base`: Define the base styles for the row.
+- `section.headerRow.layout.stretch`: Define the styles when the elemnts should be stretched.
+- `section.headerRow.layout.spaceBetween`: Define the styles the elements should have a space between.
+- `section.headerRow.layout.start`: Define the styles when the elements should be aligned to the start.
+- `section.headerRow.layout.center`: Define the styles when the elements should be aligned to the center.
+- `section.headerRow.layout.end`: Define the styles when the elements should be aligned to the end.
diff --git a/src/components/section/SectionHeader/SectionHeaderRow.tsx b/src/components/section/SectionHeader/SectionHeaderRow.tsx
new file mode 100644
index 00000000..9acd7c9f
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderRow.tsx
@@ -0,0 +1,35 @@
+import classNames from 'classnames'
+import { ReactElement, ReactNode } from 'react'
+import { useTheme } from '../../../framework'
+import { ClassNameProps } from '../../types'
+
+export enum SectionHeaderRowLayout {
+  stretch = 'stretch',
+  spaceBetween = 'spaceBetween',
+  start = 'start',
+  center = 'center',
+  end = 'end',
+}
+
+export function SectionHeaderRow({
+  layout = SectionHeaderRowLayout.spaceBetween,
+  children,
+  className,
+}: {
+  layout?: SectionHeaderRowLayout
+  children?: ReactNode
+} & ClassNameProps): ReactElement {
+  const { section } = useTheme()
+
+  return (
+    <div
+      className={classNames(
+        section.headerRow.base,
+        section.headerRow.layout[layout],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/section/SectionHeader/SectionHeaderSpacer.stories.mdx b/src/components/section/SectionHeader/SectionHeaderSpacer.stories.mdx
new file mode 100644
index 00000000..c81d84d5
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderSpacer.stories.mdx
@@ -0,0 +1,47 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import {
+  SectionHeaderSpacer,
+  SectionHeaderSpacerSize,
+} from './SectionHeaderSpacer'
+
+<Meta
+  title="Components/Section/SectionHeaderSpacer"
+  component={SectionHeaderSpacer}
+/>
+
+# SectionHeaderSpacer
+
+This component is used to add a defined space to the bottom of `SectionHeader`. It has to be inserted as the very last element in the `SectionHeader`.
+
+It is best used when you have a multi-row header with search or filters.
+Check the [List examples](/docs/examples-list--default-story) to see how to use it.
+
+export const Template = ({ ...args }) => <SectionHeaderSpacer {...args} />
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      size: undefined,
+    }}
+    argTypes={{
+      size: {
+        options: Object.values(SectionHeaderSpacerSize),
+        control: { type: 'select' },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `section.headerSpacer.size.sm`: Define the styles for the section header spacer with a small space.
+- `section.headerSpacer.size.md`: Define the styles for the section header spacer with a medium space.
+- `section.headerSpacer.size.lg`: Define the styles for the section header spacer with a large space.
+- `section.headerSpacer.size.xl`: Define the styles for the section header spacer with a extra large space.
diff --git a/src/components/section/SectionHeader/SectionHeaderSpacer.tsx b/src/components/section/SectionHeader/SectionHeaderSpacer.tsx
new file mode 100644
index 00000000..8e58b6a8
--- /dev/null
+++ b/src/components/section/SectionHeader/SectionHeaderSpacer.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import { ReactElement } from 'react'
+import { useTheme } from '../../../framework'
+import { ClassNameProps } from '../../types'
+
+export enum SectionHeaderSpacerSize {
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
+export function SectionHeaderSpacer({
+  size = SectionHeaderSpacerSize.sm,
+  className,
+}: {
+  size?: SectionHeaderSpacerSize
+} & ClassNameProps): ReactElement {
+  const { section } = useTheme()
+
+  return (
+    <div className={classNames(section.headerSpacer.size[size], className)} />
+  )
+}
diff --git a/src/components/section/SectionHeader/SectionSearch.stories.mdx b/src/components/section/SectionHeader/SectionSearch.stories.mdx
index 7e9d6162..0ddd84af 100644
--- a/src/components/section/SectionHeader/SectionSearch.stories.mdx
+++ b/src/components/section/SectionHeader/SectionSearch.stories.mdx
@@ -1,31 +1,25 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { useState } from 'react'
-import { SectionSearch } from './SectionSearch'
+import { action } from '@storybook/addon-actions'
+import { Section, SectionHeader, SectionFilter, SectionSearch } from '../'
 
 <Meta title="Components/Section/SectionSearch" component={SectionSearch} />
 
 # SectionSearch
 
-This component defines the entire search part that can be placed inside the `SectionHeader`. It wraps a `SectionTitle`
-and a `SectionAction` for not searching and an input with another `SectionAction` for searching.
+This component is used to add a standardized search input to the `SectionFilter` inside of a `SectionHeader`.
 
-export const Template = ({ ...args }) => {
-  const [search, setSearch] = useState('')
-  return (
-    <div className="flex items-center">
-      <SectionSearch
-        {...args}
-        search={search}
-        actions={{ search: setSearch, clear: () => setSearch('') }}
-      />
-    </div>
-  )
-}
+export const Template = ({ ...args }) => (
+  <Section>
+    <SectionHeader>
+      <SectionFilter initialValues={{ search: '' }} onSubmit={action('filter')}>
+        <SectionSearch {...args} />
+      </SectionFilter>
+    </SectionHeader>
+  </Section>
+)
 
 <Canvas>
-  <Story name="Default" args={{ title: 'List of users' }}>
-    {Template.bind({})}
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
 ### Props
diff --git a/src/components/section/SectionHeader/SectionSearch.tsx b/src/components/section/SectionHeader/SectionSearch.tsx
index aa5cd82e..4c11d771 100644
--- a/src/components/section/SectionHeader/SectionSearch.tsx
+++ b/src/components/section/SectionHeader/SectionSearch.tsx
@@ -1,70 +1,31 @@
-import { ReactElement, useEffect, useRef, useState } from 'react'
 import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
-import { UseSearchQuery } from '../../types'
-import { useInternationalization, useTheme } from '../../../framework'
-import { SectionAction } from './SectionAction'
-import { SectionTitle } from './SectionTitle'
+import { ReactElement } from 'react'
+import { useInternationalization } from '../../../framework'
+import { Input, InputProps, Variant } from '../../form'
 
-type SectionSearchProps = {
-  title: string
-} & UseSearchQuery
+// Utility function to exclude props from a union type
+type ExcludeProp<Type, Fields> = {
+  [Property in keyof Type as Exclude<Property, Fields>]: Type[Property]
+}
+
+// Exclude ref to avoid TypeScript error. Should be fixed in the future.
+// Make name optional to use 'search' as default
+export type SectionSearchProps = ExcludeProp<InputProps, 'ref' | 'name'> &
+  Partial<Pick<InputProps, 'name'>>
 
 export function SectionSearch({
-  title,
-  search,
-  actions,
+  name = 'search',
+  ...props
 }: SectionSearchProps): ReactElement {
   const internationalization = useInternationalization()
-  const { section } = useTheme()
-  const [searchShow, setSearchShow] = useState<boolean>(search !== '')
-  const searchInput = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (searchInput.current !== null) {
-      searchInput.current.focus()
-    }
-  }, [searchShow])
-
-  const startSearch = (): void => {
-    setSearchShow(true)
-  }
-  const stopSearch = (): void => {
-    setSearchShow(false)
-    actions.clear()
-  }
 
-  if (searchShow) {
-    return (
-      <>
-        <input
-          ref={searchInput}
-          value={search}
-          onChange={(ev: React.ChangeEvent<HTMLInputElement>): void =>
-            actions.search(ev.target.value)
-          }
-          placeholder={internationalization.translate(
-            'shared.search.placeholder'
-          )}
-          className={section.search.input.base}
-        />
-        <SectionAction
-          Icon={IconClose}
-          label={internationalization.translate('shared.search.close')}
-          onClick={stopSearch}
-        />
-      </>
-    )
-  } else {
-    return (
-      <>
-        <SectionTitle>{title}</SectionTitle>
-        <SectionAction
-          Icon={IconSearch}
-          label={internationalization.translate('shared.search.open')}
-          onClick={startSearch}
-        />
-      </>
-    )
-  }
+  return (
+    <Input
+      name={name}
+      placeholder={internationalization.translate('shared.search.placeholder')}
+      variant={Variant.soft}
+      iconStart={IconSearch}
+      {...props}
+    />
+  )
 }
diff --git a/src/components/section/SectionItem/SectionDescriptionItem.stories.mdx b/src/components/section/SectionItem/SectionDescriptionItem.stories.mdx
index 0c1a8186..1c2e3baa 100644
--- a/src/components/section/SectionItem/SectionDescriptionItem.stories.mdx
+++ b/src/components/section/SectionItem/SectionDescriptionItem.stories.mdx
@@ -1,6 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { SectionContent } from '../Section/SectionContent'
-import { SectionDescriptionItem } from './SectionDescriptionItem'
+import {
+  Section,
+  SectionContainer,
+  SectionContent,
+  SectionDescriptionItem,
+} from '../'
 
 <Meta
   title="Components/Section/SectionDescriptionItem"
@@ -53,8 +57,12 @@ export const Template = ({ title, content, hideIfEmpty }) => (
 
 <Canvas>
   <Story name="Usage within Section">
-    <SectionContent>
-      <SectionDescriptionItem content="Name" title="John Doe" />
-    </SectionContent>
+    <Section>
+      <SectionContainer>
+        <SectionContent>
+          <SectionDescriptionItem content="Name" title="John Doe" />
+        </SectionContent>
+      </SectionContainer>
+    </Section>
   </Story>
 </Canvas>
diff --git a/src/components/section/SectionItem/SectionItem.tsx b/src/components/section/SectionItem/SectionItem.tsx
index 11ad46c6..8179192e 100644
--- a/src/components/section/SectionItem/SectionItem.tsx
+++ b/src/components/section/SectionItem/SectionItem.tsx
@@ -40,7 +40,12 @@ export const SectionListItemButton = React.forwardRef<
 >(({ children, onClick, className, ...props }, ref) => {
   const { section } = useTheme()
   return (
-    <button onClick={onClick} className="block w-full" ref={ref} {...props}>
+    <button
+      onClick={onClick}
+      className={section.listItemButton.button}
+      ref={ref}
+      {...props}
+    >
       <SectionListItem
         className={classNames(section.listItemButton.base, className)}
       >
@@ -64,7 +69,12 @@ export const SectionListItemLink = React.forwardRef<
   const LinkComponent = useLinkComponent()
   const { section } = useTheme()
   return (
-    <LinkComponent className="block" internal={internal} ref={ref} {...props}>
+    <LinkComponent
+      className={section.listItemLink.link}
+      internal={internal}
+      ref={ref}
+      {...props}
+    >
       <SectionListItem
         className={classNames(section.listItemLink.base, className)}
       >
diff --git a/src/components/section/SectionItem/SectionListItem.stories.mdx b/src/components/section/SectionItem/SectionListItem.stories.mdx
index 1640ddab..15eac7ee 100644
--- a/src/components/section/SectionItem/SectionListItem.stories.mdx
+++ b/src/components/section/SectionItem/SectionListItem.stories.mdx
@@ -1,6 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { SectionContentList } from '../Section/SectionContentList'
-import { SectionListItem } from './SectionItem'
+import {
+  Section,
+  SectionContainer,
+  SectionContentList,
+  SectionListItem,
+} from '../'
 
 <Meta title="Components/Section/SectionListItem" component={SectionListItem} />
 
@@ -30,10 +34,14 @@ export const Template = ({ children }) => (
 
 <Canvas>
   <Story name="Usage within Section">
-    <SectionContentList>
-      <SectionListItem>Jane Doe</SectionListItem>
-      <SectionListItem>John Doe</SectionListItem>
-      <SectionListItem>Mary Doe</SectionListItem>
-    </SectionContentList>
+    <Section>
+      <SectionContainer>
+        <SectionContentList>
+          <SectionListItem>Jane Doe</SectionListItem>
+          <SectionListItem>John Doe</SectionListItem>
+          <SectionListItem>Mary Doe</SectionListItem>
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
   </Story>
 </Canvas>
diff --git a/src/components/section/SectionItem/SectionListItemButton.stories.mdx b/src/components/section/SectionItem/SectionListItemButton.stories.mdx
index 1c6c05df..9ef72cec 100644
--- a/src/components/section/SectionItem/SectionListItemButton.stories.mdx
+++ b/src/components/section/SectionItem/SectionListItemButton.stories.mdx
@@ -1,5 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { SectionListItemButton } from './SectionItem'
+import {
+  Section,
+  SectionContainer,
+  SectionContentList,
+  SectionListItemButton,
+} from '../'
 
 <Meta
   title="Components/Section/SectionListItemButton"
@@ -29,3 +34,19 @@ export const Template = ({ children, ...args }) => {
 
 - `section.listItemButton.base`: Define the base style of the component.
 - `section.listItemButton.action`: Define the base style of the action.
+
+## Example: Usage within Section
+
+<Canvas>
+  <Story name="Usage within Section">
+    <Section>
+      <SectionContainer>
+        <SectionContentList>
+          <SectionListItemButton>Item 1</SectionListItemButton>
+          <SectionListItemButton>Item 2</SectionListItemButton>
+          <SectionListItemButton>Item 3</SectionListItemButton>
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
+  </Story>
+</Canvas>
diff --git a/src/components/section/SectionItem/SectionListItemLink.stories.mdx b/src/components/section/SectionItem/SectionListItemLink.stories.mdx
index e6f4acbf..ad886d0d 100644
--- a/src/components/section/SectionItem/SectionListItemLink.stories.mdx
+++ b/src/components/section/SectionItem/SectionListItemLink.stories.mdx
@@ -1,5 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { SectionListItemLink } from './SectionItem'
+import {
+  Section,
+  SectionContainer,
+  SectionContentList,
+  SectionListItemLink,
+} from '../'
 
 <Meta
   title="Components/Section/SectionListItemLink"
@@ -26,5 +31,22 @@ export const Template = ({ children, ...args }) => {
 
 ### Theme
 
+- `section.listItemLink.link`: Define the style of the wrapper link.
 - `section.listItemLink.base`: Define the base style of the component.
 - `section.listItemLink.action`: Define the base style of the action.
+
+## Example: Usage within Section
+
+<Canvas>
+  <Story name="Usage within Section">
+    <Section>
+      <SectionContainer>
+        <SectionContentList>
+          <SectionListItemLink href="#1">Link 1</SectionListItemLink>
+          <SectionListItemLink href="#2">Link 2</SectionListItemLink>
+          <SectionListItemLink href="#3">Link 3</SectionListItemLink>
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
+  </Story>
+</Canvas>
diff --git a/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx b/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
index caeaa50c..4554734e 100644
--- a/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
+++ b/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
@@ -1,8 +1,12 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import IconEdit from '@aboutbits/react-material-icons/dist/IconEdit'
 import IconCopyAll from '@aboutbits/react-material-icons/dist/IconCopyAll'
-import { SectionContentList } from '../Section/SectionContentList'
-import { SectionListItemWithAction } from './SectionItem'
+import {
+  Section,
+  SectionContainer,
+  SectionContentList,
+  SectionListItemWithAction,
+} from '../'
 
 <Meta
   title="Components/Section/SectionListItemWithAction"
@@ -59,22 +63,32 @@ export const Template = ({ children, action }) => (
 
 <Canvas>
   <Story name="Usage within Section">
-    <SectionContentList>
-      <SectionListItemWithAction
-        action={<IconEdit width={20} height={20} className="fill-current" />}
-      >
-        Jane Doe
-      </SectionListItemWithAction>
-      <SectionListItemWithAction
-        action={<IconEdit width={20} height={20} className="fill-current" />}
-      >
-        John Doe
-      </SectionListItemWithAction>
-      <SectionListItemWithAction
-        action={<IconEdit width={20} height={20} className="fill-current" />}
-      >
-        Mary Doe
-      </SectionListItemWithAction>
-    </SectionContentList>
+    <Section>
+      <SectionContainer>
+        <SectionContentList>
+          <SectionListItemWithAction
+            action={
+              <IconEdit width={20} height={20} className="fill-current" />
+            }
+          >
+            Jane Doe
+          </SectionListItemWithAction>
+          <SectionListItemWithAction
+            action={
+              <IconEdit width={20} height={20} className="fill-current" />
+            }
+          >
+            John Doe
+          </SectionListItemWithAction>
+          <SectionListItemWithAction
+            action={
+              <IconEdit width={20} height={20} className="fill-current" />
+            }
+          >
+            Mary Doe
+          </SectionListItemWithAction>
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
   </Story>
 </Canvas>
diff --git a/src/components/section/index.ts b/src/components/section/index.ts
index 1bc9641c..cd18e660 100644
--- a/src/components/section/index.ts
+++ b/src/components/section/index.ts
@@ -1,10 +1,15 @@
 export * from './Section/Section'
+export * from './Section/SectionContainer'
 export * from './Section/SectionContent'
 export * from './Section/SectionContentList'
 export * from './Section/SectionContentTwoColumn'
-export * from './SectionHeader/SectionAction'
+export * from './Section/SubsectionTitle'
 export * from './SectionHeader/SectionHeader'
+export * from './SectionHeader/SectionHeaderSpacer'
+export * from './SectionHeader/SectionHeaderRow'
+export * from './SectionHeader/SectionHeaderGroup'
 export * from './SectionHeader/SectionTitle'
+export * from './SectionHeader/SectionFilter'
 export * from './SectionHeader/SectionSearch'
 export * from './SectionItem/SectionItem'
 export * from './SectionItem/SectionDescriptionItem'
diff --git a/src/components/section/theme.ts b/src/components/section/theme.ts
index 48dd8f61..551fdd67 100644
--- a/src/components/section/theme.ts
+++ b/src/components/section/theme.ts
@@ -1,12 +1,15 @@
 export default {
   section: {
-    base: 'lg:shadow-md lg:rounded-md overflow-hidden bg-white',
+    base: '',
+  },
+  container: {
+    base: 'bg-white border border-neutral-400 rounded-lg overflow-hidden',
   },
   content: {
-    base: 'pt-5 pb-10 px-4 lg:px-5 bg-white',
+    base: 'flex flex-col gap-y-6 px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
   },
   contentList: {
-    base: 'space-y-px bg-gray-500',
+    base: '',
   },
   contentListEmpty: {
     base: 'justify-center py-4',
@@ -24,10 +27,10 @@ export default {
     },
   },
   contentTwoColumn: {
-    base: 'grid xl:grid-cols-2 xl:gap-x-5 gap-y-5',
+    base: 'grid xl:grid-cols-2 xl:gap-x-11 gap-y-6 px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
   },
   listItem: {
-    base: 'flex items-center min-h-[3.5rem] px-4 lg:px-5 bg-white text-black',
+    base: 'flex items-center min-h-[3.5rem] bg-white px-4 md:px-6',
   },
   listItemWithAction: {
     base: 'justify-between space-x-4',
@@ -36,44 +39,55 @@ export default {
     },
   },
   descriptionItem: {
-    base: 'flex flex-col pb-2 space-y-1 text-black border-b border-gray-500',
+    base: 'flex flex-col text-neutral-800 border-b border-neutral-200',
   },
   descriptionItemTitle: {
-    base: 'text-sm',
+    base: 'text-xs',
   },
   listItemButton: {
-    base: 'justify-between space-x-4 hover:bg-primary-50',
+    button:
+      'block w-full border-b border-neutral-200 last:border-0 focus:outline-neutral-800',
+    base: 'px-4 md:px-6 justify-between space-x-4 hover:bg-neutral-100',
   },
   listItemLink: {
-    base: 'justify-between space-x-4 hover:bg-primary-50 active:bg-primary-50',
+    link: 'block focus:outline-neutral-800',
+    base: 'justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
+  },
+  subsectionTitle: {
+    base: 'bg-neutral-100 px-4 md:px-6 py-1 border-b border-t first:border-t-none border-neutral-200 text-sm text-neutral-600',
   },
   header: {
-    base: 'px-4 lg:px-5 py-5 flex justify-between items-center space-x-2 bg-gray-300 border-b border-gray-500',
+    base: 'py-2 flex flex-col gap-y-2',
+  },
+  headerSpacer: {
+    size: {
+      sm: '',
+      md: 'h-2',
+      lg: 'h-4',
+      xl: 'h-6',
+    },
   },
   title: {
-    base: 'py-0.5 flex-1 text-sm font-bold uppercase text-black',
-  },
-  search: {
-    input: {
-      base: 'flex-1 text-base border-none outline-none p-0 bg-transparent placeholder-gray-600 text-black',
+    base: 'py-2 flex-1 text-base text-neutral-800',
+  },
+  headerRow: {
+    base: '',
+    layout: {
+      stretch: '',
+      spaceBetween: 'flex justify-between gap-x-2.5',
+      start: 'flex justify-start gap-x-2.5',
+      center: 'flex justify-center gap-x-2.5',
+      end: 'flex justify-end gap-x-2.5',
     },
   },
-  action: {
-    base: 'fill-current text-black hover:bg-gray-500 focus:bg-gray-500 rounded-full hover:ring focus:ring ring-gray-500 disabled:text-gray-400',
-    icon: 'h-6',
+  headerGroup: {
+    base: 'flex items-center gap-y-2',
+    spacing: {
+      sm: 'gap-x-2.5',
+      md: 'gap-x-6',
+    },
   },
   footer: {
-    base: 'lg:p-4 py-4 px-3 bg-gray-300 border-t border-gray-500',
-  },
-  filter: {
-    trigger: {
-      base: 'absolute -right-2 p-1 bg-primary-500 rounded-full',
-    },
-    container: {
-      base: 'px-4 lg:px-5 py-5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-5 bg-gray-300 border-b border-gray-500',
-    },
-    dialog: {
-      base: 'px-4 lg:px-5 py-5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 bg-white border-b border-gray-500',
-    },
+    base: 'px-4 md:px-6 py-4 bg-neutral-100 border-t border-neutral-200 text-xs',
   },
 }
diff --git a/src/components/sectionFilter/FilterDialog.tsx b/src/components/sectionFilter/FilterDialog.tsx
deleted file mode 100644
index 9e8d6ea4..00000000
--- a/src/components/sectionFilter/FilterDialog.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Dialog } from '@reach/dialog'
-import classNames from 'classnames'
-import { useInternationalization, useTheme } from '../../framework'
-import { DialogHeader, DialogHeaderProps } from '../dialog'
-import { ClassNameProps } from '../types'
-
-export type FilterDialogProps = Partial<Pick<DialogHeaderProps, 'title'>> &
-  Pick<DialogHeaderProps, 'onDismiss'> & {
-    /**
-     * Accessibility label for the dialog.
-     **/
-    dialogLabel?: string
-  } & ClassNameProps
-
-const FilterDialog: React.FC<FilterDialogProps> = ({
-  title,
-  onDismiss,
-  children,
-  dialogLabel,
-  className,
-}) => {
-  const internationalization = useInternationalization()
-  const { dialog } = useTheme()
-  return (
-    <Dialog
-      onDismiss={onDismiss}
-      aria-label={
-        dialogLabel ||
-        title ||
-        internationalization.translate('shared.filter.label')
-      }
-      className={classNames(dialog.select.base, className)}
-    >
-      <DialogHeader
-        onDismiss={onDismiss}
-        title={title || internationalization.translate('shared.filter.label')}
-      />
-      {children}
-    </Dialog>
-  )
-}
-
-export { FilterDialog }
diff --git a/src/components/sectionFilter/SectionFilter.stories.mdx b/src/components/sectionFilter/SectionFilter.stories.mdx
deleted file mode 100644
index 4b5d3a05..00000000
--- a/src/components/sectionFilter/SectionFilter.stories.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { useState } from 'react'
-import { action } from '@storybook/addon-actions'
-import {
-  Section,
-  SectionContentList,
-  SectionHeader,
-  SectionListItemButton,
-  SectionTitle,
-} from '../section'
-import { Select } from '../form'
-import { SectionFilter } from './SectionFilter'
-import { SectionFilterAction } from './SectionFilterAction'
-
-<Meta
-  title="Components/Section/SectionFilter"
-  component={SectionFilter}
-  decorators={[
-    (Story) => (
-      <Section>
-        <Story />
-      </Section>
-    ),
-  ]}
-/>
-
-# SectionFilter
-
-You can use the SectionFilter component to create a filter on a specific Section.
-It supports two modes out off the box. The dialog mode shows the filter in a dialog, which is very convenient on mobile devices, whereas the drop under mode shows the filter in a collapsible fashion.
-
-This component is based on two libraries that you need to install in your project as well:
-
-```
-npm i @reach/dialog @aboutbits/react-toolbox
-```
-
-export const Template = () => {
-  const [filter, setFilter] = useState({ role: '', department: '' })
-  const [filterShow, setFilterShow] = useState(false)
-  const content = Array.from(Array(10).keys())
-    .map((item, index) => ({
-      name: `User ${item + 1}`,
-      role: index % 8 === 0 ? 'ADMIN' : 'USER',
-      department: index % 3 === 0 ? 'HR' : 'SALES',
-    }))
-    .filter((item) => {
-      return (
-        (filter.role === '' || item.role === filter.role) &&
-        (filter.department === '' || item.department === filter.department)
-      )
-    })
-  return (
-    <>
-      <SectionHeader>
-        <SectionTitle>Users</SectionTitle>
-        <SectionFilterAction
-          onClick={() => {
-            setFilterShow(!filterShow)
-          }}
-          isFiltering={filter.department !== '' || filter.role !== ''}
-        />
-      </SectionHeader>
-      {filterShow && (
-        <SectionFilter
-          initialValues={filter}
-          onFilter={(values) => {
-            setFilter(values)
-          }}
-          dialogProps={{
-            confirmationButtonContent: 'Apply filter',
-            onDismiss: () => setFilterShow(false),
-          }}
-        >
-          <Select id="role" autoCapitalize="none" name="role" label="Role">
-            <option className="bg-gray-600" value="">
-              All
-            </option>
-            <option className="bg-gray-600" value="ADMIN">
-              Admin
-            </option>
-            <option className="bg-gray-600" value="USER">
-              User
-            </option>
-          </Select>
-          <Select
-            id="department"
-            autoCapitalize="none"
-            name="department"
-            label="Department"
-          >
-            <option className="bg-gray-600" value="">
-              All
-            </option>
-            <option className="bg-gray-600" value="HR">
-              Human Resources
-            </option>
-            <option className="bg-gray-600" value="IT">
-              Engineering
-            </option>
-            <option className="bg-gray-600" value="SALES">
-              Sales
-            </option>
-          </Select>
-        </SectionFilter>
-      )}
-      <SectionContentList>
-        {content.map((item) => (
-          <SectionListItemButton
-            key={item.name}
-            onClick={() => action('clicked')}
-          >
-            {`${item.name} (${item.role} - ${item.department})`}
-          </SectionListItemButton>
-        ))}
-      </SectionContentList>
-    </>
-  )
-}
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-### Theme
-
-- `section.filter.trigger.base`: styles of the indicator of applied filters
-- `section.filter.container.base`: styles for the pop under form container
-- `section.filter.dialog.base`: styles for the dialog form container
diff --git a/src/components/sectionFilter/SectionFilter.tsx b/src/components/sectionFilter/SectionFilter.tsx
deleted file mode 100644
index 69776e1f..00000000
--- a/src/components/sectionFilter/SectionFilter.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import classNames from 'classnames'
-import { Form, Formik, useFormikContext } from 'formik'
-import { ReactElement, ReactNode, useEffect, useRef } from 'react'
-import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
-import { useTheme } from '../../framework'
-import { ClassNameProps } from '../types'
-import { SubmitButton } from '../button/SubmitButton'
-import { FilterDialog, FilterDialogProps } from './FilterDialog'
-
-type Props<T> = ClassNameProps & {
-  /**
-   * Initial values of the filter.
-   */
-  initialValues: T
-  /**
-   * Callback when filters are applied.
-   * Popup mode: Only called on confirmation button press.
-   * Collapsible mode: Called on every change of an input value.
-   * @param values T
-   */
-  onFilter: (values: T) => void
-  /**
-   * Visualize the filter options in a dialog, if it matches the provided media query.
-   * e.g. '(max-width: 768px)'
-   */
-  asDialogMediaQuery?: string
-  /**
-   * Input fields of your filter.
-   */
-  children: ReactNode
-  /**
-   * The dialog props are required, if you want to show the filter in form of a dialog on certain screen sizes.
-   */
-  dialogProps?: FilterDialogProps & {
-    /**
-     * Defines the content of the confirmation button, which is displayed in the popup.
-     */
-    confirmationButtonContent?: ReactNode
-  }
-}
-
-function SubmitOnChange(): null {
-  const formik = useFormikContext()
-  const initialRender = useRef<boolean>(true)
-
-  useEffect(() => {
-    if (initialRender.current) {
-      initialRender.current = false
-    } else if (formik.isValid) {
-      formik.submitForm()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formik.isValid, formik.values])
-
-  return null
-}
-
-export function SectionFilter<T>({
-  className,
-  initialValues,
-  onFilter,
-  asDialogMediaQuery = '(max-width: 768px)',
-  dialogProps,
-  children,
-}: Props<T>): ReactElement {
-  const { section } = useTheme()
-  const showFilterDialog = useMatchMediaQuery(asDialogMediaQuery)
-
-  if (showFilterDialog && dialogProps) {
-    const { confirmationButtonContent, onDismiss, ...filterDialogProps } =
-      dialogProps
-
-    return (
-      <FilterDialog onDismiss={onDismiss} {...filterDialogProps}>
-        <Formik<T>
-          initialValues={initialValues}
-          onSubmit={(values) => {
-            onFilter(values)
-            onDismiss()
-          }}
-        >
-          <Form className={classNames(section.filter.dialog.base, className)}>
-            {children}
-            <div className="col-span-full">
-              <SubmitButton className="w-full">
-                {confirmationButtonContent}
-              </SubmitButton>
-            </div>
-          </Form>
-        </Formik>
-      </FilterDialog>
-    )
-  }
-
-  return (
-    <Formik<T> initialValues={initialValues} onSubmit={onFilter}>
-      <Form className={classNames(section.filter.container.base, className)}>
-        <SubmitOnChange />
-        {children}
-      </Form>
-    </Formik>
-  )
-}
diff --git a/src/components/sectionFilter/SectionFilterAction.tsx b/src/components/sectionFilter/SectionFilterAction.tsx
deleted file mode 100644
index a1857027..00000000
--- a/src/components/sectionFilter/SectionFilterAction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import IconFilterList from '@aboutbits/react-material-icons/dist/IconFilterList'
-import { ReactElement } from 'react'
-import { SectionAction, SectionActionProps } from '../section'
-import { useInternationalization, useTheme } from '../../framework'
-
-type Props = Pick<SectionActionProps, 'onClick'> &
-  Partial<Pick<SectionActionProps, 'label' | 'Icon'>> & {
-    isFiltering: boolean
-  }
-
-function SectionFilterAction({
-  onClick,
-  label,
-  Icon,
-  isFiltering,
-}: Props): ReactElement {
-  const internationalization = useInternationalization()
-  const { section } = useTheme()
-
-  return (
-    <div className="relative flex items-center">
-      <SectionAction
-        Icon={Icon || IconFilterList}
-        label={label || internationalization.translate('shared.filter.label')}
-        onClick={onClick}
-      />
-      {isFiltering && <div className={section.filter.trigger.base} />}
-    </div>
-  )
-}
-
-export { SectionFilterAction }
diff --git a/src/components/sectionFilter/index.ts b/src/components/sectionFilter/index.ts
deleted file mode 100644
index 459b31e7..00000000
--- a/src/components/sectionFilter/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './SectionFilterAction'
-export * from './SectionFilter'
diff --git a/src/examples/details.stories.mdx b/src/examples/details.stories.mdx
index 0431e550..7ba1da2e 100644
--- a/src/examples/details.stories.mdx
+++ b/src/examples/details.stories.mdx
@@ -3,6 +3,8 @@ import { useIntl } from 'react-intl'
 import { ContentArea } from '../components/content/ContentArea/ContentArea'
 import {
   Section,
+  SectionContainer,
+  SectionContent,
   SectionContentTwoColumn,
   SectionDescriptionItem,
   SectionHeader,
@@ -23,23 +25,25 @@ export const Template = ({ title }) => {
         <SectionHeader>
           <SectionTitle>{title}</SectionTitle>
         </SectionHeader>
-        <SectionContentTwoColumn>
-          <SectionDescriptionItem
-            content="John Doe"
-            title={intl.formatMessage({ id: 'shared.field.name' })}
-          />
-          <SectionDescriptionItem
-            content="info@aboutbits.it"
-            title={intl.formatMessage({ id: 'shared.field.email' })}
-          />
-          <SectionDescriptionItem content="admin" title="Role" />
-          <SectionDescriptionItem content="English" title="Language" />
-          <SectionDescriptionItem
-            className="xl:col-span-2"
-            content="John is a software engineer from Bolzano, Italy."
-            title="Bio"
-          />
-        </SectionContentTwoColumn>
+        <SectionContainer>
+          <SectionContent>
+            <SectionDescriptionItem
+              content="John Doe"
+              title={intl.formatMessage({ id: 'shared.field.name' })}
+            />
+            <SectionDescriptionItem
+              content="info@aboutbits.it"
+              title={intl.formatMessage({ id: 'shared.field.email' })}
+            />
+            <SectionDescriptionItem content="admin" title="Role" />
+            <SectionDescriptionItem content="English" title="Language" />
+            <SectionDescriptionItem
+              className="xl:col-span-2"
+              content="John is a software engineer from Bolzano, Italy."
+              title="Bio"
+            />
+          </SectionContent>
+        </SectionContainer>
       </Section>
     </ContentArea>
   )
@@ -50,3 +54,43 @@ export const Template = ({ title }) => {
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Details with two columns layout (on xl screens)
+
+export const TwoColumnTemplate = ({ title }) => {
+  const intl = useIntl()
+  return (
+    <ContentArea>
+      <Section>
+        <SectionHeader>
+          <SectionTitle>{title}</SectionTitle>
+        </SectionHeader>
+        <SectionContainer>
+          <SectionContentTwoColumn>
+            <SectionDescriptionItem
+              content="John Doe"
+              title={intl.formatMessage({ id: 'shared.field.name' })}
+            />
+            <SectionDescriptionItem
+              content="info@aboutbits.it"
+              title={intl.formatMessage({ id: 'shared.field.email' })}
+            />
+            <SectionDescriptionItem content="admin" title="Role" />
+            <SectionDescriptionItem content="English" title="Language" />
+            <SectionDescriptionItem
+              className="xl:col-span-2"
+              content="John is a software engineer from Bolzano, Italy."
+              title="Bio"
+            />
+          </SectionContentTwoColumn>
+        </SectionContainer>
+      </Section>
+    </ContentArea>
+  )
+}
+
+<Canvas>
+  <Story name="TwoColumn" args={{ title: 'Detailed user view' }}>
+    {TwoColumnTemplate.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/examples/form.stories.mdx b/src/examples/form.stories.mdx
index 36cc9d5f..de7efde3 100644
--- a/src/examples/form.stories.mdx
+++ b/src/examples/form.stories.mdx
@@ -7,9 +7,11 @@ import { ContentArea } from '../components/content'
 import { Form, Input, Select, TextArea } from '../components/form'
 import {
   Section,
+  SectionContainer,
   SectionContentTwoColumn,
   SectionHeader,
   SectionTitle,
+  SectionFooter,
 } from '../components/section'
 import { Actions } from '../components/action'
 import { SubmitButton } from '../components/button/SubmitButton'
@@ -62,63 +64,72 @@ export const Template = ({ title }) => {
             <SectionHeader>
               <SectionTitle>{title}</SectionTitle>
             </SectionHeader>
-            <SectionContentTwoColumn>
-              <Input
-                id="name"
-                type="text"
-                autoCapitalize="none"
-                name="name"
-                placeholder={intl.formatMessage({
-                  id: 'shared.field.name',
-                })}
-                label={intl.formatMessage({ id: 'shared.field.name' })}
-              />
-              <Input
-                id="email"
-                type="email"
-                autoCapitalize="none"
-                name="email"
-                placeholder={intl.formatMessage({
-                  id: 'shared.field.email',
-                })}
-                label={intl.formatMessage({ id: 'shared.field.email' })}
-              />
-              <Select
-                id="language"
-                autoCapitalize="none"
-                name="language"
-                label={intl.formatMessage({ id: 'shared.field.language' })}
-              >
-                {i18n.supportedLanguages.map((supportedLanguage, index) => (
-                  <option
-                    className="bg-gray-600"
-                    key={index}
-                    value={supportedLanguage}
-                  >
-                    {locales[supportedLanguage]}
+            <SectionContainer>
+              <SectionContentTwoColumn>
+                <Input
+                  id="name"
+                  type="text"
+                  autoCapitalize="none"
+                  name="name"
+                  placeholder={intl.formatMessage({
+                    id: 'shared.field.name',
+                  })}
+                  label={intl.formatMessage({ id: 'shared.field.name' })}
+                />
+                <Input
+                  id="email"
+                  type="email"
+                  autoCapitalize="none"
+                  name="email"
+                  placeholder={intl.formatMessage({
+                    id: 'shared.field.email',
+                  })}
+                  label={intl.formatMessage({ id: 'shared.field.email' })}
+                />
+                <Select
+                  id="language"
+                  autoCapitalize="none"
+                  name="language"
+                  label={intl.formatMessage({ id: 'shared.field.language' })}
+                >
+                  {i18n.supportedLanguages.map((supportedLanguage, index) => (
+                    <option
+                      className="bg-gray-600"
+                      key={index}
+                      value={supportedLanguage}
+                    >
+                      {locales[supportedLanguage]}
+                    </option>
+                  ))}
+                </Select>
+                <Select
+                  id="role"
+                  autoCapitalize="none"
+                  name="role"
+                  label="Role"
+                >
+                  <option className="bg-gray-600" value="ADMIN">
+                    Admin
                   </option>
-                ))}
-              </Select>
-              <Select id="role" autoCapitalize="none" name="role" label="Role">
-                <option className="bg-gray-600" value="ADMIN">
-                  Admin
-                </option>
-                <option className="bg-gray-600" value="USER">
-                  User
-                </option>
-              </Select>
-              <TextArea
-                id="bio"
-                rows="3"
-                className="xl:col-span-2"
-                name="bio"
-                label="Bio"
-              />
-            </SectionContentTwoColumn>
+                  <option className="bg-gray-600" value="USER">
+                    User
+                  </option>
+                </Select>
+                <TextArea
+                  id="bio"
+                  rows="3"
+                  className="xl:col-span-2"
+                  name="bio"
+                  label="Bio"
+                />
+              </SectionContentTwoColumn>
+              <SectionFooter>
+                <Actions>
+                  <SubmitButton>Save</SubmitButton>
+                </Actions>
+              </SectionFooter>
+            </SectionContainer>
           </Section>
-          <Actions>
-            <SubmitButton>Save</SubmitButton>
-          </Actions>
         </Form>
       </Formik>
     </ContentArea>
diff --git a/src/examples/list.stories.mdx b/src/examples/list.stories.mdx
index 5d38e6c8..353c3895 100644
--- a/src/examples/list.stories.mdx
+++ b/src/examples/list.stories.mdx
@@ -1,111 +1,268 @@
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
+import IconFilterList from '@aboutbits/react-material-icons/dist/IconFilterList'
+import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
+import { Dialog } from '@reach/dialog'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 import { useState } from 'react'
+import { Actions } from '../components/action'
+import {
+  Button,
+  ButtonIcon,
+  Variant as ButtonVariant,
+  SubmitButton,
+} from '../components/button'
+import { DialogHeader } from '../components/dialog'
 import {
   Section,
+  SectionTitle,
+  SectionContainer,
+  SubsectionTitle,
   SectionContentList,
   SectionContentListEmpty,
   SectionHeader,
+  SectionHeaderSpacer,
+  SectionHeaderRow,
+  SectionHeaderRowLayout,
+  SectionHeaderGroup,
+  SectionHeaderGroupSpacing,
+  SectionFilter,
   SectionSearch,
   SectionListItemButton,
   SectionFooter,
 } from '../components/section'
-import { PaginationInMemory } from '../components/pagination'
-import { SectionFilter, SectionFilterAction } from '../components/sectionFilter'
-import { Select } from '../components/form'
+import { SectionFooterWithPaginationInMemory } from '../components/pagination'
+import { Select, Variant as InputVariant } from '../components/form'
+import { Tone } from '../components/types'
 
 <Meta title="Examples/List" />
 
-# List
+# Simple List
 
-The following example shows how multiple section components and the in memory pagination are used to create an overview list.
+Setting `numberOfTotalItems` to 0 will reveal the placeholder for the empty list.
 
-Changing the properties `numberOfTotalItems` and `numberOfItemsPerPage` will change the number of pages and/or the number the of items per page.
+export const TemplateDefault = ({ numberOfTotalItems }) => {
+  const content = Array.from(Array(numberOfTotalItems).keys()).map(
+    (item, index) => ({
+      name: `User ${item + 1}`,
+      role: index % 8 === 0 ? 'ADMIN' : 'USER',
+      department: index % 3 === 0 ? 'HR' : 'SALES',
+    })
+  )
+  return (
+    <Section>
+      <SectionHeader>
+        <SectionTitle>List of users</SectionTitle>
+      </SectionHeader>
+      <SectionContainer>
+        <SectionContentList>
+          {content.length > 0 &&
+            content.map((item) => (
+              <SectionListItemButton
+                key={item.name}
+                onClick={() => action('clicked')}
+              >
+                {`${item.name} (${item.role} - ${item.department})`}
+              </SectionListItemButton>
+            ))}
+          {content.length === 0 && (
+            <SectionContentListEmpty>
+              No users found in database.
+            </SectionContentListEmpty>
+          )}
+        </SectionContentList>
+      </SectionContainer>
+    </Section>
+  )
+}
 
-Setting `numberOfTotalItems` to 0 will reveal the placeholder for the empty list.
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      numberOfTotalItems: 5,
+    }}
+  >
+    {TemplateDefault.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+# List with search and filter
+
+The following example shows how multiple section components and the in memory pagination are used to create an overview list with filters.
+
+Changing the properties `numberOfTotalItems` and `numberOfItemsPerPage` will change the number of pages and/or the number the of items per page.
 
-export const Template = ({ numberOfTotalItems, numberOfItemsPerPage }) => {
+export const TemplateComplexList = ({
+  numberOfTotalItems,
+  numberOfItemsPerPage,
+}) => {
   const [page, setPage] = useState(1)
-  const [search, setSearch] = useState('')
-  const [filter, setFilter] = useState({ role: '', department: '' })
-  const [filterShow, setFilterShow] = useState(false)
+  const [filter, setFilter] = useState({ role: '', department: '', search: '' })
   const content = Array.from(Array(numberOfTotalItems).keys())
     .map((item, index) => ({
       name: `User ${item + 1}`,
       role: index % 8 === 0 ? 'ADMIN' : 'USER',
       department: index % 3 === 0 ? 'HR' : 'SALES',
     }))
-    .filter((item) => {
-      return (
-        item.name.includes(search) &&
+    .filter(
+      (item) =>
+        item.name.includes(filter.search) &&
         (filter.role === '' || item.role === filter.role) &&
         (filter.department === '' || item.department === filter.department)
-      )
-    })
+    )
+  const Filter = ({ variant, className }) => (
+    <SectionHeaderGroup className={className}>
+      <Select id="role" name="role" variant={variant}>
+        <option className="bg-gray-600" value="">
+          All roles
+        </option>
+        <option className="bg-gray-600" value="ADMIN">
+          Admin
+        </option>
+        <option className="bg-gray-600" value="USER">
+          User
+        </option>
+      </Select>
+      <Select id="department" name="department" variant={variant}>
+        <option className="bg-gray-600" value="">
+          All departments
+        </option>
+        <option className="bg-gray-600" value="HR">
+          Human Resources
+        </option>
+        <option className="bg-gray-600" value="IT">
+          Engineering
+        </option>
+        <option className="bg-gray-600" value="SALES">
+          Sales
+        </option>
+      </Select>
+    </SectionHeaderGroup>
+  )
   return (
     <Section>
       <SectionHeader>
-        <SectionSearch
-          title="List of users"
-          search={search}
-          actions={{ search: setSearch, clear: () => setSearch('') }}
-        />
-        <SectionFilterAction
-          onClick={() => {
-            setFilterShow(!filterShow)
-          }}
-          isFiltering={filter.department !== '' || filter.role !== ''}
-        />
-      </SectionHeader>
-      {filterShow && (
+        <SectionHeaderRow>
+          <SectionTitle>List of users</SectionTitle>
+          <ButtonIcon
+            label="Add"
+            icon={IconAdd}
+            variant={ButtonVariant.transparent}
+            tone={Tone.neutral}
+          />
+        </SectionHeaderRow>
         <SectionFilter
           initialValues={filter}
-          onFilter={setFilter}
-          dialogProps={{
-            onDismiss: () => setFilterShow(false),
-            confirmationButtonContent: 'Apply filter',
-          }}
+          onSubmit={(values) => setFilter(values)}
         >
-          <Select id="role" autoCapitalize="none" name="role" label="Role">
-            <option className="bg-gray-600" value="">
-              All
-            </option>
-            <option className="bg-gray-600" value="ADMIN">
-              Admin
-            </option>
-            <option className="bg-gray-600" value="USER">
-              User
-            </option>
-          </Select>
-          <Select
-            id="department"
-            autoCapitalize="none"
-            name="department"
-            label="Department"
-          >
-            <option className="bg-gray-600" value="">
-              All
-            </option>
-            <option className="bg-gray-600" value="HR">
-              Human Resources
-            </option>
-            <option className="bg-gray-600" value="IT">
-              Engineering
-            </option>
-            <option className="bg-gray-600" value="SALES">
-              Sales
-            </option>
-          </Select>
+          <SectionHeaderRow layout={SectionHeaderRowLayout.stretch}>
+            <SectionHeaderGroup
+              spacing={SectionHeaderGroupSpacing.md}
+              className="flex-col md:flex-row gap-y-2"
+            >
+              <SectionSearch className="w-full md:w-auto grow" />
+              <Filter
+                variant={InputVariant.transparent}
+                className="hidden md:flex"
+              />
+              <Filter
+                variant={InputVariant.soft}
+                className="grid md:hidden grid-cols-2 w-full"
+              />
+            </SectionHeaderGroup>
+          </SectionHeaderRow>
         </SectionFilter>
-      )}
-      <SectionContentList>
-        {content.length > 0 &&
-          content
-            .slice(
-              (page - 1) * numberOfItemsPerPage,
-              (page - 1) * numberOfItemsPerPage + numberOfItemsPerPage
-            )
-            .map((item) => (
+        <SectionHeaderSpacer />
+      </SectionHeader>
+      <SectionContainer>
+        <SectionContentList>
+          {content.length > 0 &&
+            content
+              .slice(
+                (page - 1) * numberOfItemsPerPage,
+                (page - 1) * numberOfItemsPerPage + numberOfItemsPerPage
+              )
+              .map((item) => (
+                <SectionListItemButton
+                  key={item.name}
+                  onClick={() => action('clicked')}
+                >
+                  {`${item.name} (${item.role} - ${item.department})`}
+                </SectionListItemButton>
+              ))}
+          {content.length === 0 && (
+            <SectionContentListEmpty>
+              No users found in database.
+            </SectionContentListEmpty>
+          )}
+        </SectionContentList>
+        <SectionFooterWithPaginationInMemory
+          page={page}
+          size={numberOfItemsPerPage}
+          total={content.length}
+          onChangePage={setPage}
+        />
+      </SectionContainer>
+    </Section>
+  )
+}
+
+<Canvas>
+  <Story
+    name="List with search and filter"
+    args={{
+      numberOfTotalItems: 1000,
+      numberOfItemsPerPage: 5,
+    }}
+  >
+    {TemplateComplexList.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="List with search and filter" />
+
+# List with search
+
+export const TemplateSearch = ({ numberOfTotalItems }) => {
+  const [filter, setFilter] = useState({ search: '' })
+  const content = Array.from(Array(numberOfTotalItems).keys())
+    .map((item, index) => ({
+      name: `User ${item + 1}`,
+      role: index % 8 === 0 ? 'ADMIN' : 'USER',
+      department: index % 3 === 0 ? 'HR' : 'SALES',
+    }))
+    .filter((item) => item.name.includes(filter.search))
+  return (
+    <Section>
+      <SectionFilter
+        initialValues={filter}
+        onSubmit={(values) => setFilter(values)}
+      >
+        <SectionHeader>
+          <SectionHeaderRow>
+            <SectionTitle>List of users</SectionTitle>
+            <SectionSearch className="hidden md:block" />
+          </SectionHeaderRow>
+          <SectionHeaderRow
+            layout={SectionHeaderRowLayout.stretch}
+            className="block md:hidden"
+          >
+            <SectionSearch />
+          </SectionHeaderRow>
+          <SectionHeaderSpacer className="md:hidden" />
+        </SectionHeader>
+      </SectionFilter>
+      <SectionContainer>
+        <SectionContentList>
+          {content.length > 0 &&
+            content.map((item) => (
               <SectionListItemButton
                 key={item.name}
                 onClick={() => action('clicked')}
@@ -113,36 +270,256 @@ export const Template = ({ numberOfTotalItems, numberOfItemsPerPage }) => {
                 {`${item.name} (${item.role} - ${item.department})`}
               </SectionListItemButton>
             ))}
-        {content.length === 0 && (
-          <SectionContentListEmpty>
-            No users found in database.
-          </SectionContentListEmpty>
-        )}
-      </SectionContentList>
-      <SectionFooter>
-        <PaginationInMemory
-          page={page}
-          size={numberOfItemsPerPage}
-          total={content.length}
-          onChangePage={setPage}
-        />
-      </SectionFooter>
+          {content.length === 0 && (
+            <SectionContentListEmpty>
+              No users found in database.
+            </SectionContentListEmpty>
+          )}
+        </SectionContentList>
+      </SectionContainer>
     </Section>
   )
 }
 
 <Canvas>
   <Story
-    name="Default"
+    name="List with search"
+    args={{
+      numberOfTotalItems: 10,
+    }}
+  >
+    {TemplateSearch.bind({})}
+  </Story>
+</Canvas>
+
+# List with subsection title
+
+export const TemplateWithSubtitle = () => {
+  const content = Array.from(Array(5).keys()).map((item, index) => ({
+    name: `User ${item + 1}`,
+    role: index % 3 === 0 ? 'ADMIN' : 'USER',
+    department: index % 2 === 0 ? 'HR' : 'SALES',
+  }))
+  const UserList = ({ role }) => (
+    <SectionContentList>
+      {content.length > 0 &&
+        content
+          .filter((item) => item.role === role)
+          .map((item) => (
+            <SectionListItemButton
+              key={item.name}
+              onClick={() => action('clicked')}
+            >
+              {`${item.name} (${item.role} - ${item.department})`}
+            </SectionListItemButton>
+          ))}
+    </SectionContentList>
+  )
+  return (
+    <Section>
+      <SectionHeader>
+        <SectionTitle>List of users</SectionTitle>
+      </SectionHeader>
+      <SectionContainer>
+        <SubsectionTitle>Users</SubsectionTitle>
+        <UserList role="USER" />
+        <SubsectionTitle>Admins</SubsectionTitle>
+        <UserList role="ADMIN" />
+        <SectionFooter>
+          <Actions>
+            <Button>Submit</Button>
+            <Button variant={ButtonVariant.ghost} className="lg:order-first">
+              Cancel
+            </Button>
+          </Actions>
+        </SectionFooter>
+      </SectionContainer>
+    </Section>
+  )
+}
+
+<Canvas>
+  <Story
+    name="List with subsection title"
     args={{
       numberOfTotalItems: 1000,
       numberOfItemsPerPage: 5,
     }}
   >
-    {Template.bind({})}
+    {TemplateWithSubtitle.bind({})}
+  </Story>
+</Canvas>
+
+# List with filter dialog
+
+This exmpale uses a dialog for the filter on smaller screen sizes, whereas the larger layout shows the filter in the section header.
+This example is based on two libraries that you need to install in your project as well:
+
+```
+npm i @reach/dialog @aboutbits/react-toolbox
+```
+
+export const TemplateListWithFilterDialog = ({
+  numberOfTotalItems,
+  numberOfItemsPerPage,
+}) => {
+  const [page, setPage] = useState(1)
+  const [filter, setFilter] = useState({ role: '', department: '', search: '' })
+  const [dialogShow, setDialogShow] = useState(false)
+  const isDialogEnabled = useMatchMediaQuery('(max-width: 768px)')
+  const content = Array.from(Array(numberOfTotalItems).keys())
+    .map((item, index) => ({
+      name: `User ${item + 1}`,
+      role: index % 8 === 0 ? 'ADMIN' : 'USER',
+      department: index % 3 === 0 ? 'HR' : 'SALES',
+    }))
+    .filter(
+      (item) =>
+        item.name.includes(filter.search) &&
+        (filter.role === '' || item.role === filter.role) &&
+        (filter.department === '' || item.department === filter.department)
+    )
+  const Filters = () => (
+    <>
+      <Select id="role" name="role" variant={InputVariant.transparent}>
+        <option className="bg-gray-600" value="">
+          All roles
+        </option>
+        <option className="bg-gray-600" value="ADMIN">
+          Admin
+        </option>
+        <option className="bg-gray-600" value="USER">
+          User
+        </option>
+      </Select>
+      <Select
+        id="department"
+        name="department"
+        variant={InputVariant.transparent}
+      >
+        <option className="bg-gray-600" value="">
+          All departments
+        </option>
+        <option className="bg-gray-600" value="HR">
+          Human Resources
+        </option>
+        <option className="bg-gray-600" value="IT">
+          Engineering
+        </option>
+        <option className="bg-gray-600" value="SALES">
+          Sales
+        </option>
+      </Select>
+      <SectionSearch className="col-span-full" />
+    </>
+  )
+  return (
+    <>
+      {isDialogEnabled && dialogShow && (
+        <Dialog
+          onDismiss={() => setDialogShow(false)}
+          aria-label="Filter"
+          className="mx-auto bg-white overflow-hidden"
+        >
+          <DialogHeader onDismiss={() => setDialogShow(false)} title="Filter" />
+          <SectionFilter
+            initialValues={filter}
+            enableReinitialize
+            autoSubmit={false}
+            onSubmit={(values) => {
+              setFilter(values)
+              setDialogShow(false)
+            }}
+            className="p-4 grid grid-cols-1 gap-y-2 bg-white border-b border-neutral-500"
+          >
+            <Filters />
+            <SubmitButton className="col-span-full mt-2">
+              Apply filter
+            </SubmitButton>
+          </SectionFilter>
+        </Dialog>
+      )}
+      <Section>
+        <SectionHeader>
+          <SectionHeaderRow>
+            <SectionTitle>List of users</SectionTitle>
+            {isDialogEnabled ? (
+              <SectionHeaderGroup>
+                <div className="relative flex items-center">
+                  <ButtonIcon
+                    icon={IconFilterList}
+                    label="Filter"
+                    onClick={() => setDialogShow(true)}
+                    variant={ButtonVariant.transparent}
+                    tone={Tone.neutral}
+                  />
+                  {filter.department !== '' ||
+                    filter.role !== '' ||
+                    (filter.search !== '' && (
+                      <div className="absolute left-0 p-1 bg-primary-500 rounded-full" />
+                    ))}
+                </div>
+              </SectionHeaderGroup>
+            ) : (
+              <SectionFilter
+                initialValues={filter}
+                enableReinitialize
+                onSubmit={(values) => setFilter(values)}
+                className="flex"
+              >
+                <SectionHeaderGroup>
+                  <Filters />
+                </SectionHeaderGroup>
+              </SectionFilter>
+            )}
+          </SectionHeaderRow>
+        </SectionHeader>
+        <SectionContainer>
+          <SectionContentList>
+            {content.length > 0 &&
+              content
+                .slice(
+                  (page - 1) * numberOfItemsPerPage,
+                  (page - 1) * numberOfItemsPerPage + numberOfItemsPerPage
+                )
+                .map((item) => (
+                  <SectionListItemButton
+                    key={item.name}
+                    onClick={action('clicked')}
+                  >
+                    {`${item.name} (${item.role} - ${item.department})`}
+                  </SectionListItemButton>
+                ))}
+            {content.length === 0 && (
+              <SectionContentListEmpty>
+                No users found in database.
+              </SectionContentListEmpty>
+            )}
+          </SectionContentList>
+          <SectionFooterWithPaginationInMemory
+            page={page}
+            size={numberOfItemsPerPage}
+            total={content.length}
+            onChangePage={setPage}
+          />
+        </SectionContainer>
+      </Section>
+    </>
+  )
+}
+
+<Canvas>
+  <Story
+    name="List with filters in dialog on mobile"
+    args={{
+      numberOfTotalItems: 1000,
+      numberOfItemsPerPage: 5,
+    }}
+  >
+    {TemplateListWithFilterDialog.bind({})}
   </Story>
 </Canvas>
 
 ### Props
 
-<ArgsTable story="Default" />
+<ArgsTable story="List with filters in dialog on mobile" />
diff --git a/src/sectionFilter.ts b/src/sectionFilter.ts
deleted file mode 100644
index 865f42ae..00000000
--- a/src/sectionFilter.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/sectionFilter'
diff --git a/src/translations/shared.en.json b/src/translations/shared.en.json
index ea197127..bb96314f 100644
--- a/src/translations/shared.en.json
+++ b/src/translations/shared.en.json
@@ -22,13 +22,11 @@
   "shared.error.tryAgain": "Try again",
   "shared.error.api": "The backend failed to handle the request.",
   "shared.search.placeholder": "Search",
-  "shared.search.open": "Open search",
   "shared.search.close": "Close search",
   "shared.search.back": "Close search",
   "shared.search.clear": "Clear search",
   "shared.select.clear": "Clear selection",
   "shared.search.label": "Search",
-  "shared.filter.label": "Filter",
   "shared.month.JANUARY": "January",
   "shared.month.FEBRUARY": "February",
   "shared.month.MARCH": "March",
diff --git a/tailwind.config.js b/tailwind.config.js
index 85836704..eb01676a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
     './src/**/*.jsx',
     './src/**/*.ts',
     './src/**/*.tsx',
+    './src/**/*.mdx',
     './.storybook/preview.js',
   ],
   theme: {