Home
Divider
The divider component is used to visually separate content.
Usage
Here are several predefined checkbox styles, each serving its own semantic purpose.
Horizontal Divider Usage
Content A
Content B
Content A
Content B
<style>
.container-horizontal {
display: inline-block;
margin-right: 1rem;
padding: 1rem;
width: 200px;
border: 1px solid var(--color-outline);
}
</style>
<div class="container-horizontal">
<p>Content A</p>
<wc-divider></wc-divider>
<p>Content B</p>
</div>
<div class="container-horizontal">
<p>Content A</p>
<wc-divider> or</wc-divider>
<p>Content B</p>
</div>
Vertical Divider Usage
Content A
Content B
Content A
Content B
<style>
.container-vertical {
display: flex;
height: 150px;
margin-bottom: 1rem;
padding: 1rem;
width: 250px;
border: 1px solid var(--color-outline);
}
.container-vertical p {
display: flex;
align-items: center;
}
</style>
<div class="container-vertical">
<p>Content A</p>
<wc-divider vertical="true"></wc-divider>
<p>Content B</p>
</div>
<div class="container-vertical">
<p>Content A</p>
<wc-divider vertical="true"> or</wc-divider>
<p>Content B</p>
</div>