Capsules

A .capsule is the cargo a satellite carries: your content. It stays centered and upright however far around the ring the satellite travels.

Any HTML goes in a capsule. It works inside a .satellite and inside a .side. Content placed directly in a satellite is not centered or kept upright, and with dev-orbit on the .bigbang the console says so.

A capsule is as wide as its satellite and as tall as its content, so text wraps at the satellite's width. Give the capsule its own width for a label wider than the satellite. Like satellites, capsules have no border or background until you give them one.

Where it sits in the satellite

A capsule is centered in its satellite. An alignment class on the satellite moves it: .at-top-left, .at-top, .at-top-right, .at-center-left, .at-center-right, .at-bottom-left, .at-bottom or .at-bottom-right. .at-center is the exception: on a satellite it places the satellite itself at the center of the system.

Turning the content

.flip turns a capsule upside down, .turn-left a quarter turn left and .turn-right a quarter turn right. In a .spin-lock satellite the content turns with the satellite and points its top at the center; .flip makes it point outward.

In a side

In a .side, a capsule lies along the side and turns with it, which suits labels on the edges of a polygon. Labels on the lower edges read upright; .flip turns over the ones at the top, and .horizontal keeps a capsule level instead.

Reference