Separator
A Separator is a line that creates visual and semantic separation between UI elements or sections.
What the Avonni Separator does
The Separator component visually separates the content into distinct sections. It commonly groups related items or provides a page's visual hierarchy. The separator component is a horizontal line spanning the container's width. It is a simple but effective way to organize and structure content.
Changing the Properties
Adding a label
The label field represents the text you want to display in the separator.
Playing with alignment
The separator content can be positioned with values that include start, center and end.
Adding an icon
An icon can be added next to the separator label. The position can be set by changing the Icon Position property.
Adding Interactions
No interactions are available.
Styling the Separator
From the Styles panel, you can customize styling attributes for the Separator:
Label: to customize the styling settings of the label.Icon: to customize the styling settings of the icon.Border: to customize the styling settings of the border line.
You can find the instructions for styling here.
Examples
| Property | Value |
|---|---|
Label | TODAY |
Align Content | Center |
Icon Name | standard:service_appointment_capacity_usage |
Icon Size | Medium |
Icon Position | Left |
Style / Label Color | #107cad |
Style / Font Size | 20px |
Style / Font Weight | 700 - Bold |
Style / Icon Background Color | #2e844a |
Style / Border Size | 2px |
Style / Border Color | #107cad |
Style / Border Style | Solid |
Specifications
Attributes
| Name | Type | Description |
|---|---|---|
alignContent | String | Position of the content in the separator. Valid values include start, center and end. |
iconName | String | The name of the icon to be used in the format 'utility:down'. |
iconPosition | String | Describes the position of the icon. Valid values include left and right. |
iconSize | String | The size of the icon. Options include |
label | String | Text to display in the separator. |
Events
No events are available.
Styling Hooks
Label
| Name | Description |
|---|---|
Text Color | Define a text color for the label text |
Font Size | Define a font size for the label text |
Font Style | Define a font style for the label text |
Font Weight | Define a font weight for the label text |
Icon
| Name | Description |
|---|---|
Background Color | Define a background color for the icon |
Foreground Color | Define a foreground color for the icon |
Foreground Color Default | Define a foreground color default for the icon |
Border Radius | Define a border radius size for the icon |
Border
| Name | Description |
|---|---|
Border Color | Define a border color for the border |
Border Size | Define a border size for the border |
Border Style | Define a border style for the border |
Last updated
