Divider

Use CDivider for a thematic break between sections or a decorative line in dense layouts. It adds no external spacing and no JavaScript.

Divider at a glance

Show code

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerAtAGlance(Component):
    template = """
      <section class="divider-glance" aria-labelledby="divider-glance-title">
        <p class="divider-glance__eyebrow">Deep-sky field guide</p>
        <h2 id="divider-glance-title">Northern summer</h2>
        <p>Trace bright nebulae before the Milky Way reaches the western horizon.</p>
        <c-CDivider>After midnight</c-CDivider>
        <div class="divider-glance__row">
          <span>Cygnus</span>
          <c-CDivider orientation="vertical" c-decorative="True" />
          <span>Lyra</span>
          <c-CDivider orientation="vertical" c-decorative="True" />
          <span>Aquila</span>
        </div>
      </section>
    """
    css = """
      :where(.divider-glance) {
        max-inline-size: 36rem;
        padding: 1.25rem;
        border: 1px solid light-dark(#b9c9e8, #41557c);
        border-radius: 0.9rem;
        background: light-dark(#f7f9ff, #141b30);
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-glance h2, .divider-glance p) {
        margin: 0;
      }

      :where(.divider-glance h2) {
        margin-block: 0.2rem 0.5rem;
        font-size: 1.15rem;
      }

      :where(.divider-glance__eyebrow) {
        color: light-dark(#3d5c9a, #a9bfe8);
        font-size: 0.72rem;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      :where(.divider-glance [data-citry-ui-part="divider"][data-labeled]) {
        margin-block: 1rem;
      }

      :where(.divider-glance__row) {
        display: flex;
        min-block-size: 2.25rem;
        align-items: stretch;
        gap: 0.75rem;
      }
    """


preview = DividerAtAGlance()

preview  # noqa: B018

Compose a Divider

An unlabelled horizontal Divider is a native thematic break.

Compose semantic Dividers

Show code

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class BasicDividers(Component):
    template = """
      <section class="divider-basic">
        <article>
          <h2>Orion Nebula</h2>
          <p>A luminous stellar nursery around 1,300 light-years away.</p>
        </article>
        <c-CDivider />
        {{ python_divider }}
        <article>
          <h2>Lagoon Nebula</h2>
          <p>Dark dust lanes cross a glowing cloud in Sagittarius.</p>
        </article>
      </section>
    """

    def template_data(
        self,
        kwargs: Any,  # noqa: ARG002
        slots: Any,  # noqa: ARG002
    ) -> dict[str, object]:
        return {"python_divider": citry_ui.CDivider(variant="dotted")}

    css = """
      :where(.divider-basic) {
        display: grid;
        gap: 1rem;
        max-inline-size: 34rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-basic h2, .divider-basic p) {
        margin: 0;
      }

      :where(.divider-basic h2) {
        font-size: 1rem;
      }
    """


preview = BasicDividers()

preview  # noqa: B018

<c-CDivider />

Compose the same result in Python:

from citry_ui import CDivider

divider = CDivider()

Choose semantic or decorative output

Keep the default when the break separates topics. Use decorative=True when the line is only visual and nearby structure already conveys the grouping.

Compare semantic and decorative lines

Show code

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SemanticAndDecorativeDividers(Component):
    template = """
      <section class="divider-meaning">
        <article>
          <h2>Semantic break</h2>
          <p>Observation notes end here.</p>
          <c-CDivider />
          <p>A new topic begins with the equipment log.</p>
        </article>
        <article>
          <h2>Decorative line</h2>
          <div class="divider-meaning__metric">
            <span>Exposure</span>
            <c-CDivider c-decorative="True" />
            <strong>180 s</strong>
          </div>
        </article>
      </section>
    """
    css = """
      :where(.divider-meaning) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 1rem;
        max-inline-size: 42rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-meaning article) {
        display: grid;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid light-dark(#cbd5e1, #475569);
        border-radius: 0.75rem;
      }

      :where(.divider-meaning h2, .divider-meaning p) {
        margin: 0;
      }

      :where(.divider-meaning h2) {
        font-size: 1rem;
      }

      :where(.divider-meaning__metric) {
        display: grid;
        gap: 0.5rem;
      }
    """


preview = SemanticAndDecorativeDividers()

preview  # noqa: B018

Choose orientation

Horizontal Dividers separate vertically stacked content. Vertical Dividers separate items across a flex or grid row and stretch with their container.

Compare horizontal and vertical Dividers

Show code

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerOrientations(Component):
    template = """
      <section class="divider-orientations">
        <div class="divider-orientations__horizontal">
          <span>First quarter</span>
          <c-CDivider variant="dashed" c-decorative="True" />
          <span>Full moon</span>
        </div>
        <div class="divider-orientations__vertical">
          <span>Rise 20:14</span>
          <c-CDivider orientation="vertical" c-decorative="True" />
          <span>Transit 01:36</span>
          <c-CDivider orientation="vertical" c-decorative="True" />
          <span>Set 06:51</span>
        </div>
      </section>
    """
    css = """
      :where(.divider-orientations) {
        display: grid;
        gap: 1.25rem;
        max-inline-size: 38rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-orientations__horizontal) {
        display: grid;
        gap: 0.75rem;
      }

      :where(.divider-orientations__vertical) {
        display: flex;
        min-block-size: 2.5rem;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.6rem;
        background: light-dark(#eef2ff, #1e2744);
      }
    """


preview = DividerOrientations()

preview  # noqa: B018

Add a visible label

The optional default slot places ordinary visible content between two decorative lines. Use a real heading inside when the document needs heading semantics. Labels are horizontal only.

Position visible Divider labels

Show code

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerLabels(Component):
    template = """
      <section class="divider-labels">
        <c-CDivider label_pos="start">Inner planets</c-CDivider>
        <c-CDivider>Asteroid belt</c-CDivider>
        <c-CDivider label_pos="end">Outer planets</c-CDivider>
      </section>
    """
    css = """
      :where(.divider-labels) {
        display: grid;
        gap: 1.5rem;
        max-inline-size: 40rem;
        padding: 1rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }
    """


preview = DividerLabels()

preview  # noqa: B018

Choose line style and thickness

Variants select solid, dashed, or dotted lines. Sizes provide concise 1, 2, and 4 pixel thickness presets.

Compare Divider variants and sizes

Show code

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerVariantsAndSizes(Component):
    template = """
      <section class="divider-matrix">
        <c-for each="variant in variants">
          <div class="divider-matrix__row">
            <code>{{ variant }}</code>
            <c-for each="size in sizes">
              <div>
                <span>{{ size }}</span>
                <c-CDivider c-variant="variant" c-size="size" c-decorative="True" />
              </div>
            </c-for>
          </div>
        </c-for>
      </section>
    """

    def template_data(
        self,
        kwargs: Any,  # noqa: ARG002
        slots: Any,  # noqa: ARG002
    ) -> dict[str, object]:
        return {
            "variants": ("solid", "dashed", "dotted"),
            "sizes": ("sm", "md", "lg"),
        }

    css = """
      :where(.divider-matrix) {
        display: grid;
        gap: 1rem;
        max-inline-size: 42rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-matrix__row) {
        display: grid;
        grid-template-columns: 5rem repeat(3, minmax(4rem, 1fr));
        align-items: center;
        gap: 0.75rem;
      }

      :where(.divider-matrix__row > div) {
        display: grid;
        gap: 0.35rem;
      }

      :where(.divider-matrix span) {
        color: light-dark(#475569, #cbd5e1);
        font-size: 0.72rem;
        text-align: center;
      }
    """


preview = DividerVariantsAndSizes()

preview  # noqa: B018

Align with nested content

Insets add logical spacing along the line axis. They follow text direction, so start and end remain meaningful in LTR and RTL layouts.

Apply logical Divider insets

Show code

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerInsets(Component):
    template = """
      <section class="divider-insets">
        <c-for each="inset in insets">
          <div>
            <span>{{ inset }}</span>
            <c-CDivider c-inset="inset" c-decorative="True" />
          </div>
        </c-for>
        <div dir="rtl">
          <span>start in RTL</span>
          <c-CDivider inset="start" c-decorative="True" />
        </div>
      </section>
    """

    def template_data(
        self,
        kwargs: Any,  # noqa: ARG002
        slots: Any,  # noqa: ARG002
    ) -> dict[str, object]:
        return {"insets": ("none", "start", "end", "both")}

    css = """
      :where(.divider-insets) {
        display: grid;
        gap: 1rem;
        max-inline-size: 38rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-insets > div) {
        display: grid;
        gap: 0.35rem;
        padding: 0.5rem;
        border-inline: 1px dashed light-dark(#94a3b8, #64748b);
      }

      :where(.divider-insets span) {
        font-size: 0.75rem;
      }
    """


preview = DividerInsets()

preview  # noqa: B018

Customize Divider

Override public variables on an ancestor or one Divider. Stable selectors let you style the root, label, or labelled line segments without private classes.

Customize Divider with public CSS

Show code

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DividerCustomization(Component):
    template = """
      <section class="divider-themes">
        <div class="divider-themes__aurora">
          <c-CDivider>Polar observatory</c-CDivider>
        </div>
        <div class="divider-themes__eclipse">
          <c-CDivider variant="dotted">Eclipse watch</c-CDivider>
        </div>
      </section>
    """
    css = """
      :where(.divider-themes) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 1rem;
        max-inline-size: 40rem;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.divider-themes > div) {
        padding: 1.25rem;
        border-radius: 0.75rem;
      }

      :where(.divider-themes__aurora) {
        --cui-divider-color: #138a7b;
        --cui-divider-label-color: #12584f;
        --cui-divider-thickness: 2px;
        background: #e7faf6;
      }

      :where(.divider-themes__eclipse) {
        color-scheme: dark;
        --cui-divider-color: #f2b84b;
        --cui-divider-label-color: #ffe2a6;
        --cui-divider-label-font-weight: 750;
        background: #171421;
      }

      :where(.divider-themes [data-citry-ui-part="label"]) {
        letter-spacing: 0.03em;
      }
    """


preview = DividerCustomization()

preview  # noqa: B018

The default horizontal form renders a native hr. The vertical form renders a nonfocusable ARIA separator. Decorative output is hidden from assistive technology. Labelled lines are decorative while the label remains ordinary document content.

Divider never owns focus, keyboard input, resize behavior, or external margin. Use layout gaps for spacing and CSplitter for adjustable panes.

API reference

Inputs

CDivider server inputs

Server inputs are passed in a template through <c-CDivider ... /> or in Python through CDivider(...).

Input	Type	Default	Effect
`orientation`	`"horizontal" \| "vertical"` (`CDividerOrientation`)	`"horizontal"`	Selects native horizontal or ARIA vertical separator semantics.
`variant`	`"solid" \| "dashed" \| "dotted"` (`CDividerVariant`)	`"solid"`	Selects the line style.
`size`	`"sm" \| "md" \| "lg"` (`CDividerSize`)	`"sm"`	Selects 1px, 2px, or 4px fallback thickness.
`inset`	`"none" \| "start" \| "end" \| "both"` (`CDividerInset`)	`"none"`	Adds logical spacing along the line axis.
`label_pos`	`"start" \| "center" \| "end"` (`CDividerLabelPos`)	`"center"`	Positions a supplied visible label; non-default values require the default slot.
`decorative`	`bool`	`False`	Removes an unlabelled Divider from the accessibility tree. Labelled line segments are always decorative.
`class_`	`str \| Mapping[str, bool] \| Sequence[CClassValue] \| None` (`CClassValue`)	`None`	Adds root classes and merges them with `attrs`.
`style`	`str \| Mapping[str, str \| int \| float \| bool \| None] \| Sequence[CStyleValue] \| None` (`CStyleValue`)	`None`	Adds root inline styles and merges them with `attrs`.
`attrs`	`Mapping[str, object] \| None`	`None`	Adds copied trusted native, data, targeted Alpine, and event attributes without replacing Divider semantics, anatomy, or Citry runtime fields.

Slots

Slots are passed as nested content or <c-fill> tags in a template, or through the slots={...} argument in Python.

CDivider slots

Slot	Required	Data	Fallback
`default`	no	`{}` (`CDividerDefaultSlotData`)	Renders one unlabelled line.

Variable	Type	Purpose	Default
`--cui-divider-color`	`color`	Line color.	Nested-scheme border color.
`--cui-divider-thickness`	`length`	Line thickness.	Size-derived 1px, 2px, or 4px.
`--cui-divider-inset`	`length`	Logical start/end inset amount.	1.5rem
`--cui-divider-label-gap`	`length`	Gap from a visible label to each line.	0.75rem
`--cui-divider-label-color`	`color`	Visible label foreground.	CanvasText
`--cui-divider-label-font-size`	`length`	Visible label text size.	0.875rem
`--cui-divider-label-font-weight`	`font-weight`	Visible label emphasis.	600
`--cui-divider-min-length`	`length`	Useful vertical minimum length.	1em

Attributes

HTML attributes defined on the components that you can refer to for CSS, inspection, and testing. Read-only.

CDivider attributes

Attribute	Element	Type	Meaning
`data-orientation`	Root	`"horizontal" \| "vertical"`	Reflects the line axis and semantic form.
`data-variant`	Root	`"solid" \| "dashed" \| "dotted"`	Reflects the line style.
`data-size`	Root	`"sm" \| "md" \| "lg"`	Reflects the thickness preset.
`data-inset`	Root	`"none" \| "start" \| "end" \| "both"`	Reflects logical inset geometry.
`data-labeled`	Root	`present-or-absent`	Present when the default label slot renders.
`data-label-pos`	Labelled root	`"start" \| "center" \| "end"`	Reflects labelled line balance.
`data-decorative`	Root	`present-or-absent`	Present when the line exposes no separator semantics.
`aria-orientation`	Vertical semantic root	`"vertical"`	Communicates the nondefault separator orientation.
`aria-hidden`	Decorative root or labelled line	`boolean-presence`	Removes the decorative line from the accessibility tree.

Selectors

Selectors for the DOM nodes in the components that you can use for CSS, inspection, and testing.

CDivider selectors

Selector	Element	Purpose
`[data-citry-ui-part="divider"]`	Root	Stable Divider root and `attrs` destination.
`[data-citry-ui-part="line"]`	Labelled decorative line segment	Styles either of the two direct line children.
`[data-citry-ui-part="label"]`	Labelled visible-content wrapper	Styles the authored section label.

Interfaces

Aliases and data shapes referenced above.

Input type aliases

Interface	Definition
`CClassValue`	`str \| Mapping[str, bool] \| Sequence[CClassValue]`
`CStyleValue`	`str \| Mapping[str, str \| int \| float \| bool \| None] \| Sequence[CStyleValue]`
`CDividerOrientation`	`Literal["horizontal", "vertical"]`
`CDividerVariant`	`Literal["solid", "dashed", "dotted"]`
`CDividerSize`	`Literal["sm", "md", "lg"]`
`CDividerInset`	`Literal["none", "start", "end", "both"]`
`CDividerLabelPos`	`Literal["start", "center", "end"]`

`CDividerDefaultSlotData`

Empty dataclass: {}.

Divider

Divider at a glance

Compose a Divider

Choose semantic or decorative output

Choose orientation

Add a visible label

Choose line style and thickness

Align with nested content

Customize Divider

Accessibility and behavior

API reference

Inputs

CDivider server inputs

Slots

CDivider slots

Events

Methods

CSS

CDivider CSS variables

Attributes

CDivider attributes

Selectors

CDivider selectors

Interfaces

Input type aliases

`CDividerDefaultSlotData`

Translation keys