When there’s a lot of content in one place, it can help to have it all clearly organized. Separators help you keep all related content together visually and semantically so users know where to focus their attention.
Component status





Component structure

Guidelines
Use to group content
Separators present a visual cue to group together sections of content, but they also have semantic value. Remember that they add structure and aren’t just decorative.
Use them to show groups like related menu items and related text within a larger section.
import Separator from "@kiwicom/orbit-components/lib/Separator";
import LinkList from "@kiwicom/orbit-components/lib/LinkList";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
() => (
<LinkList>
<TextLink
href="https://orbit.kiwi/components/separator/"
external
type="secondary"
>
Guidelines
</TextLink>
<TextLink
href="https://orbit.kiwi/components/separator/react/"
external
type="secondary"
>
React API
</TextLink>
<Separator />
<TextLink
href="https://orbit.kiwi/getting-started/channels/team-and-contributors/"
external
type="secondary"
>
About us
</TextLink>
<TextLink href="https://code.kiwi.com/" external type="secondary">
>code.kiwi.com_
</TextLink>
<Separator />
<TextLink
href="https://www.kiwi.com/en/pages/content/terms"
external
type="secondary"
>
Terms of use
</TextLink>
<TextLink
href="https://www.kiwi.com/pages/content/terms"
external
type="secondary"
>
Privacy policy
</TextLink>
</LinkList>
)
Use only when necessary
Separators can be useful for grouping things and showing clear structures. But when they start to appear everywhere, they begin to lose their value.
Try making your designs clear with other separations, such as white space and colors.
Related components
Heading
To structure larger sections of content, use headings to make the hierarchy clear.
Text
Flags work very well for helping users select the right country. To give them that option, use a select component.