@penaprieto/design-system/dist/components/Divider/Divider.css

Multi-brand React design system with design tokens from Figma

/* Base Divider */
.ds-divider {
  border: none;
  margin: 0;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal */
.ds-divider--horizontal {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--semantic-border-default-default);
  margin: var(--size4, 16px) 0;
}

/* Vertical */
.ds-divider--vertical {
  width: 0;
  height: auto;
  align-self: stretch;
  border-left: 1px solid var(--semantic-border-default-default);
  margin: 0 var(--size4, 16px);
}

/* Variants */
.ds-divider--dashed {
  border-style: dashed;
}

.ds-divider--dotted {
  border-style: dotted;
}

/* With content */
.ds-divider--with-content {
  display: flex;
  align-items: center;
  gap: var(--size3, 12px);
  border: none;
  margin: var(--size5, 24px) 0;
}

.ds-divider--with-content::before,
.ds-divider--with-content::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid var(--semantic-border-default-default);
}

.ds-divider--with-content.ds-divider--dashed::before,
.ds-divider--with-content.ds-divider--dashed::after {
  border-style: dashed;
}

.ds-divider--with-content.ds-divider--dotted::before,
.ds-divider--with-content.ds-divider--dotted::after {
  border-style: dotted;
}

/* Content */
.ds-divider__content {
  font-family: var(--body-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-small-fontSize, 14px);
  font-weight: var(--body-small-fontWeight, 400);
  line-height: var(--body-small-lineHeight, 150%);
  color: var(--semantic-text-corp-secondary);
  white-space: nowrap;
}

/* Alignment */
.ds-divider--left::before {
  flex: 0 0 var(--size5, 24px);
}

.ds-divider--right::after {
  flex: 0 0 var(--size5, 24px);
}