Skip to content
Orbit

Capsule

.capsule is a class to put text or another content. Currently, it can be used into satellites and sides.

  • Alignment: By default, capsule is placed at center of satellite or side. This behavior can be altered using alignment utility classes such as .center-left, .center-right, .top-left, .top-center, .top-right, .bottom-left, .bottom-center, and .bottom-right.

Besides that, to stablish capsule position following CSS classes can be set:

  • horizontal: to mantain content always horizontal.

  • turn-left: to turn content 90deg left

  • turn-right: to turn content 90deg right

  • flip: to turn content upside-down.

  • Look and feel: Capsules are initially invisible but can be customized by adding border and background properties.

satellites with capsule

Section titled “satellites with capsule”

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

Sides with capsule

Section titled “Sides with capsule”

Examples include the current Orbit stylesheet and runtime. Get both files for your project.