Separator

🚧 WORK IN PROGRESS: A visual way to separate sections of content or elements either horizontally or vertically. 🚧

Class name Type
.prs-separator Component For container
.prs-separator-vertical Modifier Flow vertically

  • Default 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->

  <div class="prs-separator"> OR </div>

</div>

  • Vertical 

    <div class="w-96 h-32 max-w-xs flex justify-center gap-4"> <!-- <- this is just for demo purposes -->

  <div class="prs-separator prs-separator-vertical"> OR </div>

</div>

  • Start

    Place the label at the start of the rule line. (We use start/end for alternate language directions)

    <div class="px-4 w-screen max-w-lg min-h-[8rem] grid-(& cols-1) gap-5 md:(grid-cols-2)"> <!-- <- this is just for demo purposes -->

  <div class="prs-separator prs-separator-start"> Horz </div>
  <div class="prs-separator prs-separator-vertical prs-separator-start"> Vert </div>

</div>

  • End

    Place the label at the end of the rule line. (We use start/end for alternate language directions)

    <div class="px-4 w-screen max-w-lg min-h-[8rem] grid-(& cols-1) gap-5 md:(grid-cols-2)"> <!-- <- this is just for demo purposes -->

  <div class="prs-separator prs-separator-end"> Horz </div>
  <div class="prs-separator prs-separator-vertical prs-separator-end"> Vert </div>

</div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-separator {
  line-height: 1;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-self: stretch;
  align-items: center;

  &:not(:empty) {
    gap: 1rem;
  }

  &.prs-separator-vertical {
    flex-direction: column;

    &:before,
    &:after {
      width: 0.125rem;
      height: 100%;
    }

    &.prs-separator-start:before,
    &.prs-separator-end:after {
      width: 0.125rem;
      height: 1rem;
    }
  }

  &:before,
  &:after {
    width: 100%;
    height: 0.125rem;
    background-color: currentColor;
    flex-grow: 1;
    content: '';
    opacity: 0.25;
  }

  &.prs-separator-start:before,
  &.prs-separator-end:after {
    width: 1rem;
  }
}

Coming soon...