Divider

the unified separator: a plain hairline rule, or a rule with centered label text.

Example

<div class="lucent-divider lucent-divider--plain" role="separator">
</div>
<div class="lucent-divider lucent-divider--labeled" role="separator">OR</div>

Playground

variant 
 
 
  
Do & Don't
 
 
 
 
check_circleDo
 
use the labeled variant to separate alternatives (e.g. "OR" between a form and an SSO button).
 
 
 
cancelDon't
 
stack dividers to add vertical space; reach for spacing tokens instead.
 
 
 
 
Using it
 
 
  
 Angular  lucent-divider 
import { LucentDivider } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-divider 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 variant input plain | labeled plain hairline rule, or rule plus centered label. 
 label input string '' centered text (labeled variant). 
  
 
  
Theming
 
 
 
Color (1)
  
 
Size & spacing (1)
  
 
Border & radius (1)
  
 
Type (4)