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
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.
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
$bds-color-bg-brand
--color-lila-95$bds-color-bg-button-primary
--color-lila-30$bds-color-bg-button-primary--hover
--color-lila-20$bds-color-bg-button-primary--locked
--color-lila-80$bds-color-bg-button-primary--pressed
--color-lila-54$bds-color-bg-button-secondary
--color-grey-93$bds-color-bg-button-secondary--hover
--color-grey-90$bds-color-bg-button-secondary--locked
--color-grey-95$bds-color-bg-button-secondary--pressed
--color-grey-98$bds-color-bg-button-tertiary
--color-transparent-0$bds-color-bg-button-tertiary--hover
--color-grey-93$bds-color-bg-button-tertiary--locked
--color-transparent-0$bds-color-bg-button-tertiary--pressed
--color-grey-95$bds-color-bg-error
--color-red-95$bds-color-bg-generic
--color-grey-95$bds-color-bg-info
--color-blue-95$bds-color-bg-success
--color-green-95$bds-color-bg-warning
--color-ochre-95$bds-color-icon-brand
--color-lila-30$bds-color-icon-button-primary
--color-grey-98$bds-color-icon-button-primary--locked
--color-grey-98$bds-color-icon-button-secondary
--color-lila-30$bds-color-icon-button-secondary--locked
--color-lila-70$bds-color-icon-button-tertiary-1
--color-lila-30$bds-color-icon-button-tertiary-1--locked
--color-lila-70$bds-color-icon-button-tertiary-2
--color-grey-40$bds-color-icon-button-tertiary-2--locked
--color-grey-70$bds-color-icon-error
--color-red-50$bds-color-icon-generic
--color-grey-40$bds-color-icon-info
--color-blue-45$bds-color-icon-success
--color-green-50$bds-color-icon-warning
--color-ochre-45$bds-color-outline-brand
--color-lila-70$bds-color-outline-button-secondary
--color-grey-90$bds-color-outline-button-secondary--hover
--color-grey-86$bds-color-outline-button-secondary--locked
--color-grey-93$bds-color-outline-button-secondary--pressed
--color-grey-90$bds-color-outline-error
--color-red-70$bds-color-outline---focus
--color-azure-45$bds-color-outline-generic
--color-grey-70$bds-color-outline-info
--color-blue-67$bds-color-outline-success
--color-green-75$bds-color-outline-warning
--color-ochre-70$bds-color-text-accent
--color-lila-30$bds-color-text-brand
--color-lila-30$bds-color-text-button-primary
--color-grey-98$bds-color-text-button-primary--locked
--color-grey-98$bds-color-text-button-secondary
--color-lila-30$bds-color-text-button-secondary--locked
--color-lila-70$bds-color-text-button-tertiary-1
--color-lila-30$bds-color-text-button-tertiary-1--locked
--color-lila-70$bds-color-text-button-tertiary-2
--color-grey-40$bds-color-text-button-tertiary-2--locked
--color-grey-70$bds-color-text-error
--color-red-50$bds-color-text-generic
--color-grey-40$bds-color-text-info
--color-blue-45$bds-color-text-inverse
--color-grey-98$bds-color-text-primary
--color-grey-25$bds-color-text-secondary
--color-grey-40$bds-color-text-success
--color-green-50$bds-color-text-tertiary
--color-grey-54$bds-color-text-warning
--color-ochre-45$
export {
section-separator-color$section-title-color
--color-grey-40Properties
ts
export interface SectionProps extends ElementProps {
title?: string;
}Configurations
Section
Usage Example
vue
<script>
import { Section } from '@pohlcon/design-system';
</script>
<template>
<Section title="Material Rohbau">
<!-- Section content goes here -->
</Section>
</template>Material Rohbau