Examples

Tags

    
      <span class="tag">HTML</span>
    
  

    
      <span class="tag color-secondary">CSS</span>
    
  

Reversed color

    
      <span class="tag reversed">Back-end</span>
    
  

    
      <span class="tag reversed color-third">Python</span>
    
  

Hover

    
      <span class="tag color-secondary hover">DevOps</span>
    
  

    
      <span class="tag reversed color-secondary hover">Sysadmin</span>
    
  

Children tags

    
      <solid-multiple class="children-tag">
        <solid-display>
          <div>
            <solid-display>
              <div>
                <solid-display-value>Web services</solid-display-value>
              </div>
            </solid-display> >
          </div>
        </solid-display>
      </solid-multiple>
    
  

Tables

Classic table with 3 columns

  
    <div class="segment table-wrapper">
      <div class="table">
        <div class="table-header">
          <div class="segment table-cell table-cell third">
            Name
          </div>
          <div class="segment table-cell table-cell third">
            Firstname
          </div>
          <div class="segment table-cell table-cell third">
            Action
          </div>
        </div>
        <solid-display class="table-body">
          <div>
            <solid-display>
              <div>
                <solid-set-default class="segment table-cell third">
                </solid-set-default>
                <solid-set-default class="segment table-cell third">
                </solid-set-default>
                <solid-set-default class="segment table-cell third">
                </solid-set-default>
              </div>
            </solid-display>
          </div>
        </solid-display>
      </div>
    </div>
  

Table with third color background and heading color column titles. 2 columns.

  
    <div class="segment table-wrapper">
      <div class="table">
        <div class="table-header bg-color-third text-color-heading">
          <div class="segment table-cell table-cell half">
            Name
          </div>
          <div class="segment table-cell table-cell half">
            Action
          </div>
        </div>
        <solid-display class="table-body">
          <div>
            <solid-display>
              <div>
                <solid-set-default class="segment table-cell half">
                </solid-set-default>
                <solid-set-default class="segment table-cell half">
                </solid-set-default>
              </div>
            </solid-display>
          </div>
        </solid-display>
      </div>
    </div>
  

Segment

  
    <div class="segment full border-all-sides border-color-heading whitespace-normal">
      <p>I measure 100% of the total space</p>
      <p class="segment two-third sm-full border-all-sides border-color-secondary">I measure 66,666% of the total space.</p>
      <p class="segment quarter sm-full border-all-sides border-color-third">I measure 25% of the total space.</p>
      <p class="segment third sm-full border-all-sides border-color-heading">I measure 33,333% of the total space.</p>
      <p class="segment half sm-full border-all-sides border-color-third">I measure 50% of the total space.</p>
      <p class="segment auto sm-full border-all-sides border-color-primary">I take the space that I want.</p>
    </div>
  

Use on child elements

  
    <div class="segment full children children-third sm-children-full border-all-sides border-color-heading">
      <div>
        <solid-display>I measure 33.33% of the total space.</solid-display>
        <solid-display>I measure 33.33% of the total space.</solid-display>
        <solid-display>I measure 33.33% of the total space.</solid-display>
      </div>
    </div>
  

Padding

Same padding on all sides

  
    <div class="padding-small sm-padding-none border-all-sides border-color-primary">
      All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it?
    </div>
  

Padding(s) on specific side(s)

  
    <div class="padding-top-xlarge padding-left-small sm-padding-left-xlarge sm-padding-bottom-large border-all-sides border-color-secondary">
      She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander.
    </div>
  

Padding on children

  
    <div class="segment children children-padding-medium sm-children-padding-xxsmall border-all-sides border-color-third">
      <div>
        <solid-display>
          Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.
        </solid-display>
      </div>
    </div>
  

  
    <div class="segment children children-padding-top-medium sm-children-padding-bottom-medium border-all-sides border-color-heading">
      <div>
        <solid-display>
          Remember, a Jedi can feel the Force flowing through him.
        </solid-display>
      </div>
    </div>
  

Margin

Same margin on all sides

  
    <div class="margin-large sm-margin-none">
      Hi. I'm Troy McClure. You may remember me from such self-help tapes as "Smoke Yourself Thin" and "Get Some Confidence, Stupid!"
    </div>
  

Margin(s) on specific side(s)

  
    <div class="margin-top-xlarge margin-left-small sm-margin-left-xlarge sm-margin-bottom-large">
      When will I learn? The answers to life's problems aren't at the bottom of a bottle, they're on TV!
    </div>
  

Margin on children

  
    <div class="segment children children-margin-medium sm-children-margin-xxsmall">
      <div>
        <solid-display>
          Our differences are only skin deep, but our sames go down to the bone.
        </solid-display>
      </div>
    </div>
  

Simple text

  
    <div class="segment children children-margin-top-medium sm-children-margin-bottom-medium border-all-sides border-color-heading">
      <div>
        <solid-display>
          I hope this has taught you kids a lesson: kids never learn.
        </solid-display>
      </div>
    </div>
  

Simple text

Pagination

  
    <div class="pagination"></div>
  

Links

Backlink

  
    <solid-link class="backlink">Back</solid-link>
  

Link

  
    <solid-link class="My link">Back</solid-link>
  

Icons

Colored house icon. Its color change when you hover over it. Margin right 15px.

  
    <span class="icon icon-home icon-primary hover icon-margin-right-small"></span>
  

Centered colored envelope icon inside a large colored circle

  
    <span class="icon icon-envelope icon-secondary icon-small rounded rounded-small rounded-primary"></span>
    <span class="icon icon-envelope icon-secondary icon-xlarge rounded rounded-large rounded-primary"></span>
    <span class="icon icon-envelope icon-secondary icon-xsmall rounded rounded-small rounded-secondary"></span>
    <span class="icon icon-envelope icon-secondary icon-large rounded rounded-large rounded-heading"></span>
    <span class="icon icon-envelope icon-secondary icon-medium rounded rounded-small rounded-third"></span>
  

Colored, bold and large briefcase icon

  
    <span class="icon bold icon-briefcase icon-grey icon-xlarge"></span>
  

Form

Basics styles

A classic field

  
    <div class="form">
      <form>
        <div>
          <label>Firstname *</label>
          <input type="text">
        </div>
      </form>
    </div>
  

Classics fields in Orbit style

Use segment's sizes and text utilities to style the fields

  
    <solid-form class="segment full form">
      <form>
        <solid-form-label-text name="last_name" class="segment half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" required="">
          <label>Name *</label>
          <input type="text" name="last_name">
        </solid-form-label-text>
        <solid-form-label-text name="email²" class="segment half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading">
          <label>Email</label>
          <input type="email" name="email" required="">
        </solid-form-label-text>
        <input type="submit" value="SAVE">
      </form>
    </solid-form>
  

Textarea

  
    <solid-form class="segment full form">
      <form>
        <solid-form-textarea-label class="segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading" value="">
          <label>Job</label>
          <textarea></textarea>
        </solid-form-textarea-label>
      </form>
    </solid-form>
  

Search field with white background, shadow and the magnify icon

  
    <div class="bg-color-grey padding-top-xsmall padding-bottom-xsmall">
      <solid-form-search class="form search-form">
        <form>
          <solid-form-placeholder-text class="segment third sm-full padding-right-xsmall sm-padding-none text-small input-shadow input-bg-white icon icon-magnify" value="">
            <input type="text">
          </solid-form-placeholder-text>
        </form>
      </solid-form-search>
    </div>
  

Typography

Text sizes + weights + position + letters spacings

  
    <p class="text-xsmall text-center">text xsmall and centered</p>
  

text xsmall and centered

  
    <p class="text-small text-letter-spacing-larger">Text small with larger letter spacing</p>
  

Text small with larger letter spacing

  
    <p class="text-medium text-semibold text-right">Text medium, semibold, right-aligned</p>
  

Text medium, semibold, right-aligned

  
    <p class="text-large text-bold">Text large and bold</p>
  

Text large and bold

  
    <p class="text-xlarge text-underline">Text xlarge with underline</p>
  

Text xlarge with underline

  
    <p class="text-xxlarge text-letter-spacing-large">Text xxlarge with large letter spacing</p>
  

Text xxlarge with large letter spacing

  
    <p class="text-uppercase">Text uppercase</p>
  

Text uppercase

  
    <p class="sm-text-center">Text centered on small screens</p>
  

Text centered on small screens

Shadows

  
    <div class="shadow"></div>
  

  
    <div class="shadow-small"></div>
  

  
    <div class="shadow-large"></div>
  

Loaders

  
    <div class="loader loader-top"></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
    </div>
  

Colors

Background colors

Grey background

  
    <div class="segment bg-color-grey"></div>
  

Primary background. Hover it to see its color changing

  
    <div class="segment bg-color-primary hover"></div>
  

Third background. Changing when this element is active

  
    <div class="segment bg-color-third active"></div>
  

Text colors

Text changing color when it is hovered

  
    <p class="text-hover"></p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.

Text with its color reversed

  
    <p class="text-color-primary reverse"></p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.

Selection color

  
    <p class="selection-background"></p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.

Borders

  
    <div class="border-all-sides border-color-primary">
      <p>Salut</p>
    </div>
  

  
    <div class="border-left border-color-secondary">
      <p>Salut</p>
    </div>
  

  
    <div class="border-bottom border-color-third">
      <p>Salut</p>
    </div>
  

  
    <div class="border-right border-color-heading">
      <p>Salut</p>
    </div>
  

  
    <div class="border-all-sides border-color-grey">
      <p>Salut</p>
    </div>
  

Cursor

  
    <div class="segment cursor-pointer bg-color-heading">
      <p>Salut</p>
    </div>
  

Buttons

Bordered primary colore button with semibold text

  
    <button class="button color-primary bordered text-uppercase text-bold">Quitter le projet</button>
  

Third color button

  
    <button class="button reversed color-third bordered">Quitter le projet</button>
  

Disabled button

  
    <button class="button color-disabled bordered">Quitter le projet</button>
  

Rounded button

  
    <solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
  

Badges

Badge with a primary colored border

  
    <div class="badge">
      <div class="counter color-primary">1</div>
    </div>
  

Badge with a secondary colored background

  
    <div class="badge">
      <div class="counter reversed color-secondary">4</div>
    </div>
  

Basic badge

  
    <div class="badge">
      <div class="counter">7</div>
    </div>
  

Avatar

Avatar xsmall

  
    <div class="segment avatar-wrapper">
      <div class="avatar xsmall">
        <img src="/images/alien.png">
      </div>
    </div>
  

Avatar small

  
    <div class="segment avatar-wrapper">
      <div class="avatar small">
        <img src="/images/alien.png">
      </div>
    </div>
  

Avatar default size

  
    <div class="segment avatar-wrapper">
      <div class="avatar">
        <img src="/images/alien.png">
      </div>
    </div>
  

Avatar large

  
    <div class="segment avatar-wrapper">
      <div class="avatar large">
        <img src="/images/alien.png">
      </div>
    </div>
  

Avatar xlarge

  
    <div class="segment avatar-wrapper">
      <div class="avatar xlarge">
        <img src="/images/alien.png">
      </div>
    </div>
  

Labelled Avatar

Classic

  
    <div class="labelled-avatar">
      <div class='segment'>
        <div class="avatar"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
      </div>
    </div>
  

John Snow

  
    <div class="labelled-avatar small">
      <div class='segment'>
        <div class="avatar small"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
      </div>
    </div>
  

John Snow

  
    <div class="labelled-avatar xsmall">
      <div class='segment margin-right-xsmall'>
        <div class="avatar xsmall"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
      </div>
    </div>
  

John Snow

Two lined

  
    <div class="labelled-avatar two-lines">
      <div class='segment'>
        <div class="avatar"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
        <div>Some things</div>
      </div>
    </div>
  

John Snow

Some things

  
    <div class="labelled-avatar two-lines small">
      <div class='segment'>
        <div class="avatar small"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
        <div>Some things</div>
      </div>
    </div>
  

John Snow

Some things

  
    <div class="labelled-avatar two-lines xsmall">
      <div class='segment margin-right-xsmall'>
        <div class="avatar xsmall"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div>John Snow</div>
        <div>Some things</div>
      </div>
    </div>
  

John Snow

Some things

With icons

  
    <div class="labelled-avatar two-lines xsmall">
      <div class='segment'>
        <div class="avatar xsmall"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div class="text-small text-semibold text-color-heading">John Snow</div>
        <div class="block text-xsmall">@johnsnow</div>
      </div>
      <div class="segment">
        <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
        <div> </div>
      </div>
    </div>
  

John Snow

@johnsnow

 

  
    <div class="labelled-avatar xsmall">
      <div class='segment'>
        <div class="avatar xsmall"><img src="/images/alien.png"></div>
      </div>
      <div class='segment'>
        <div class="text-small text-semibold text-color-heading">John Snow</div>
      </div>
      <div class="segment">
        <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
      </div>
    </div>
  

John Snow