Skip to content
Orbit CSS Radial Framework

.capsule CSS Class

.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:

  • stable: 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

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite grow-2x rounded-box"> <div class="capsule"> <span style="color: var(--o-blue); font-size:13px; "> Add html tags </span> </div> </div> <div class="satellite grow-2x"> <div class="capsule "> <img src="/orbit-docs/favicon.svg" width="100"/> </div> </div> <div class="satellite sync-rotation"> <div class="capsule title flip"> Inside capsule you can put any content </div> </div> </div> </div> </div> 

.wrapper {
border: 1px dotted var(--o-purple);
height: 250px;
width: 250px;
float: left;
overflow: hidden;
margin: 5px;
}


.satellite {
border: none;
background-color: var(--o-blue-lighter)
}
.satellite:last-child {
background-color: transparent
}
.title {
width: 150px;
border: 1px solid var(--o-green);
color:  var(--o-green-dark);
background-color: var(--o-green-lighter);
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="satellite grow-2x rounded-box">
          <div class="capsule">
            <span style="color:  var(--o-blue); font-size:13px; ">
             Add html tags
            </span>
          </div>
        </div>
        <div class="satellite grow-2x">
          <div class="capsule ">
            <img src="/orbit-docs/favicon.svg" width="100"/>
          </div>
        </div>
        <div class="satellite sync-rotation">
         <div class="capsule title flip">
          Inside capsule you can put any content


          </div>
        </div>
      </div>
    </div>
  </div>

Sides with capsule

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="side grow-2x rounded-box"> <div class="capsule flip"> <span style="color: var(--o-blue); font-size:13px; "> Add html tags </span> </div> </div> <div class="side grow-2x"> <div class="capsule stable"> <img src="/orbit-docs/favicon.svg" width="100"/> </div> </div> <div class="side "> <div class="capsule title "> Inside capsule you can put any content </div> </div> </div> </div> </div> 

.wrapper {
border: 1px dotted var(--o-purple);
height: 250px;
width: 250px;
float: left;
overflow: hidden;
margin: 5px;
}


.satellite {
border: none;
background-color: var(--o-blue-lighter)
}
.satellite:last-child {
background-color: transparent
}
.title {
width: 150px;
border: 1px solid var(--o-green);
color:  var(--o-green-dark);
background-color: var(--o-green-lighter);
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="side grow-2x rounded-box">
          <div class="capsule flip">
            <span style="color:  var(--o-blue); font-size:13px; ">
             Add html tags
            </span>
          </div>
        </div>
        <div class="side grow-2x">
          <div class="capsule stable">
            <img src="/orbit-docs/favicon.svg" width="100"/>
          </div>
        </div>
        <div class="side ">
         <div class="capsule title ">
          Inside capsule you can put any content


          </div>
        </div>
      </div>
    </div>
  </div>