Container(
  [
    Container([text('content')], style: [/* styles */]),
    Divider([text('OR')]),
    Container([text('content')], style: [/* styles */]),
  ],
  style: [Layout.flex, Layout.flexCol, Size.wFull],
)

Container(
  [
    Container([text('content')], style: [Flex.grow, /* other styles */]),
    Divider([text('OR')], style: [Divider.horizontal]),
    Container([text('content')], style: [Flex.grow, /* other styles */]),
  ],
  style: [Layout.flex, Size.wFull],
)

Container(
  [
    Container([text('content')], style: [/* styles */]),
    Divider([]),
    Container([text('content')], style: [/* styles */]),
  ],
  style: [Layout.flex, Layout.flexCol, Size.wFull],
)

// The parent container must also change its flex direction responsively.
Container(
  [
    Container([text('content')], style: [/* styles */]),
    Divider(
      [text('OR')],
      style: [Divider.horizontal.at(Breakpoint.lg)], // Responsive divider
    ),
    Container([text('content')], style: [/* styles */]),
  ],
  style: [
    Layout.flex,
    Size.wFull,
    Layout.flexCol,
    Layout.flexRow.at(Breakpoint.lg)
  ],
)

Divider([text('Default')]),
Divider([text('Neutral')], style: [Divider.neutral]),
Divider([text('Primary')], style: [Divider.primary]),
Divider([text('Secondary')], style: [Divider.secondary]),
Divider([text('Accent')], style: [Divider.accent]),
Divider([text('Success')], style: [Divider.success]),
Divider([text('Warning')], style: [Divider.warning]),
Divider([text('Info')], style: [Divider.info]),
Divider([text('Error')], style: [Divider.error]),

Divider([text('Start')], style: [Divider.start]),
Divider([text('Default')]),
Divider([text('End')], style: [Divider.end]),

Container(
  [
    Divider([text('Start')], style: [Divider.horizontal, Divider.start]),
    Divider([text('Default')], style: [Divider.horizontal]),
    Divider([text('End')], style: [Divider.horizontal, Divider.end]),
  ],
  style: [
    Layout.flex,
    Size.wFull,
    Alignment.justifyCenter,
    Size.h(52)
  ],
)