Skip to content
Orbit CSS Radial Framework

.satellite CSS class

Elements with .satellite are placed along an .orbit or .orbit-* path serving as content place and/or to nest .orbits using .gravity-spot. By default, up to 60 satellites can be placed in an orbit.

Look and feel

Satellites can be customized by adding CSS border and background properties.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite one"></div> <div class="satellite two"></div> <div class="satellite three"></div> <div class="satellite four"></div> <div class="satellite five"></div> </div> </div> </div> 

.satellite {
background-color: var(--o-indigo);
border: none;
}
.one {
background-color: var(--o-orange);
border: none;
}
.two {
background: radial-gradient(circle, rgba(246,246,246,1) 4%, rgba(52,249,67,1) 28%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 96%);
border: none;
}
.three {
background-color: var(--o-blue-lighter);
border: 2px solid var(--o-blue);
}
.four {
background-color: transparent;
border: 2px dashed var(--o-indigo);
}
.five {
background-color: var(--o-pink);

}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite one"></div>
      <div class="satellite two"></div>
      <div class="satellite three"></div>
      <div class="satellite four"></div>
      <div class="satellite five"></div>
    </div>
  </div>
</div>

In addition, a few set of CSS shapes utilities are provided (.circle, .box, .rounded-box). Nevertheless, users can set any shapes using svg, images, etc.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite"></div> <div class="satellite"></div> <div class="satellite box"></div> <div class="satellite box"></div> <div class="satellite rounded-box"></div> <div class="satellite rounded-box"></div> </div> </div> </div> 

.satellite {
background-color: var(--o-indigo);
border: none;
}
.box {
background-color: var(--o-orange);
border: none;
}
.rounded-box {
background-color: var(--o-green);
border: none;
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite"></div>
      <div class="satellite"></div>
      <div class="satellite box"></div>
      <div class="satellite box"></div>
      <div class="satellite rounded-box"></div>
      <div class="satellite rounded-box"></div>
    </div>
  </div>
</div>

Adjust Satellite size

Each .satellite has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the satellite to shrink by a specified percentage.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite "></div> <div class="satellite shrink-30"></div> <div class="satellite shrink-60"></div> <div class="satellite shrink-90"></div> </div> </div> </div> 

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}


<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite "></div>
      <div class="satellite shrink-30"></div>
      <div class="satellite shrink-60"></div>
      <div class="satellite shrink-90"></div>


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

On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing the satellite to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite grow-0.5x "></div> <div class="satellite grow-2x"></div> <div class="satellite grow-3x"></div> <div class="satellite grow-3.5x"></div> </div> </div> </div> 

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-pink)
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite grow-0.5x "></div>
      <div class="satellite grow-2x"></div>
      <div class="satellite grow-3x"></div>
      <div class="satellite grow-3.5x"></div>


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

Using satellites for nesting orbits

Satellites allow nest orbits to created complex radial designs. See orbit secction for more information.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite"> <div class="gravity-spot"> <div class="orbit"></div> <div class="orbit"></div> </div> </div> </div> </div> </div> 

.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <div class="satellite">
        <div class="gravity-spot">
          <div class="orbit"></div>
          <div class="orbit"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Adjusting radial layout

Arbitrary satellite angle.

.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite angle-315"></div> </div> </div> </div> 

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}
.orbit-5 > .satellite {
background-color: var(--o-cyan)
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <div class="satellite angle-315"></div>
    </div>
  </div>
</div>

Sync rotation

.sync-rotation informs satellites to follow orbital path.

<div class="wrapper"> <div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite">🔻</div> <div class="satellite">🔻</div> <div class="satellite">🔻</div> <div class="satellite">🔻</div> </div> </div> </div> </div> <div class="wrapper"> <div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite sync-rotation">🔻</div> <div class="satellite sync-rotation">🔻</div> <div class="satellite sync-rotation">🔻</div> <div class="satellite sync-rotation">🔻</div> </div> </div> </div> </div> 

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

.gravity-spot {
--o-force: 200px !important;
}

.satellite {
border: none;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="satellite">🔻</div>
        <div class="satellite">🔻</div>
        <div class="satellite">🔻</div>
        <div class="satellite">🔻</div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="satellite sync-rotation">🔻</div>
        <div class="satellite sync-rotation">🔻</div>
        <div class="satellite sync-rotation">🔻</div>
        <div class="satellite sync-rotation">🔻</div>
      </div>
    </div>
  </div>
</div>

Relative satellite orbital position

By default, .satellite is positioned in the middle of orbit path. To change that, there some CSS utilities:

.inner-orbit: To place an.satellite just below its orbit.

.outer-orbit: To place .satellite just above its orbit.

.quarter-inner-orbit: To place .satellite a 25% into its orbit.

.quarter-outer-orbit: To place .satellite a 25% outer its orbit.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite grow-1x outer-orbit "></div> <div class="satellite grow-1x quarter-outer-orbit"></div> <div class="satellite grow-1x quarter-inner-orbit"></div> <div class="satellite grow-1x inner-orbit"></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-pink)
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="satellite grow-1x outer-orbit "></div>
        <div class="satellite grow-1x quarter-outer-orbit"></div>
        <div class="satellite grow-1x quarter-inner-orbit"></div>
        <div class="satellite grow-1x inner-orbit"></div>
      </div>
    </div>
  </div>

Add content to satellites

Satellites are suitable to render different content.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite grow-1x">Add</div> <div class="satellite grow-1x">text</div> <div class="satellite grow-1.8x">content</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-pink);
color: white;
}
.orbit-5 {
border: 1px dashed var(--o-cyan);
}


  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <div class="satellite grow-1x">Add</div>
        <div class="satellite grow-1x">text</div>
        <div class="satellite grow-1.8x">content</div>


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

With .capsule

If other content than characters is used, it is desirable to use .capsule element inside a .satellite. See capsule reference on documentation.

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