Split block | Cosmopolitan Design System

Default split block

HTML


<div class="orc-c-split-block">

  <h3 class="orc-c-split-block__title">Heading ipsum dolor sit (39 characters)</h3>

  <div class="orc-c-split-block__inner">

    <div class="orc-c-split-block__left">
      <span class="orc-c-split-block__number">20</span>
      <span class="orc-c-split-block__label">Label</span>
    </div>

    <div class="orc-c-divider orc-c-divider--vertical">
      <div class="orc-c-divider__text">Label</div>
    </div>
    <!--end orc-c-divider-->


    <div class="orc-c-split-block__right">
      <span class="orc-c-split-block__number">5</span>
      <span class="orc-c-split-block__label">Label</span>
    </div>

  </div>
  <!--end orc-c-split-block__inner-->


</div>
<!--end orc-c-split-block-->

When to use

This is ideal for showcasing tiers and offers—for instance, get x for every y; or choose either x or y.

When to consider an alternative

For more long-form text, use split text instead.

Class Name	Description
`orc-c-split-block` Required	Default class added to the HTML component’s outer container
`orc-c-split-block__title` Recommended	Apply to the `<h3>` tag in `orc-c-split-block` to create a heading for the component
`orc-c-split-block__inner` Required	Inner container of `orc-c-split-block`. This is is set to `display: flex` to place `orc-c-split-block__left` and `orc-c-split-block__right` side-by-side.
`orc-c-split-block__left` Required	Left half of `orc-c-split-block` that contains a number and a label
`orc-c-split-block__right` Required	Right half of `orc-c-split-block` that contains a number and a label
`orc-c-split-block__number` Recommended	Class added to `<span>` within `orc-c-split-block__left` or `orc-c-split-block__right` to highlight a number.
`orc-c-split-block__label` Recommended	Class added to `<span>` within `orc-c-split-block__left` or `orc-c-split-block__right`, acting as a label to the number
`orc-c-split-block__note`	Footnote below `orc-c-split-block__inner` to add additional information about the component

Split block In Progress

Default split block `orc-c-split-block`

Usage

When to use

When to consider an alternative