Bauhaus Design System

Section ​

​

Usage ​

Section component is used to visually separate different sections of the UI especially in FormGroups. It provides a clear visual hierarchy and organization of content through titles and separators.

Types ​

There is a single type of Section component that maintains consistency across the application.

Anatomy and Behavior ​

  1. Title - As name suggests, is used to classify forms into different sections with distinct titles. It can only be single line and provides immediate context about the content below.

  2. Separator - Used to visually separate different sections, creating a clear distinction between content areas. The separator is a horizontal line that spans the full width of the section.

States ​

Section is not an interactive component, thus has no states. It maintains a consistent appearance throughout its usage.

Gaps and Sizes ​

SECTION LAYOUT

  • Gap between Title and Separator: XS
  • Width: Fills the available space
  • Separator stroke weight: Unit

Tokens ​

SCSS Variable
Value
$section-separator-color
--color-grey-80
$section-title-color
--color-grey-40

Properties ​

ts
export interface SectionProps extends ElementProps {
  title?: string;
}

Configurations ​

Usage Example ​

vue
<script>
import { Section } from '@pohlcon/design-system';

</script>

<template>
  <Section title="Material Rohbau">
    <!-- Section content goes here -->
  </Section>
</template>
Material Rohbau