Version 0.40.0

UI Organisms

Topbar

Page content
<div class="sui-o-topbar">
    <button type="button" class="sui-o-topbar__button as--toggle-menu">
        <i class="sui-a-icon">...</i>
    </button>
    <a href="#" class="sui-o-topbar__logo">
        <img src="..." alt="Saagie" />
    </a>
</div>
Page content

App name
Page content
<div class="sui-o-topbar">
    <button type="button" class="sui-o-topbar__button as--toggle-menu">
        <i class="sui-a-icon">...</i>
    </button>
    <a href="#" class="sui-o-topbar__logo">
        <img src="..." alt="Saagie" />
    </a>
    <div class="sui-o-topbar__primary">
      <div class="sui-o-topbar__title">
          App name
      </div>
    </div>
</div>
Page content

App name
Page content
<div class="sui-o-topbar">
    <button type="button" class="sui-o-topbar__button as--toggle-menu">
        <i class="sui-a-icon">...</i>
    </button>
    <a href="#" class="sui-o-topbar__logo">
        <img src="..." alt="Saagie" />
    </a>
    <div class="sui-o-topbar__primary">
      <div class="sui-o-topbar__title">
          App name
      </div>
    </div>
    <div class="sui-o-topbar__secondary">
        <button class="sui-o-topbar__user">
            <div class="sui-m-media-object as--middle as--gutter-sm">
                <div class="sui-m-media-object__media">
                    <div class="sui-a-avatar">
                        <img src="..." alt="JA" />
                    </div>
                </div>
                <div class="sui-m-media-object__content">
                    <div class="sui-a-label-value">
                        <div class="sui-a-label-value__value"> Julie A. </div>
                        <div class="sui-a-label-value__label"> Data Scientist </div>
                    </div>
                </div>
            </div>
        </button>
    </div>
</div>
Page content

Platform My Platform
Page content
<div class="sui-o-topbar">
    <button type="button" class="sui-o-topbar__button as--toggle-menu">
        <i class="sui-a-icon">...</i>
    </button>
    <a href="#" class="sui-o-topbar__logo">
        <img src="..." alt="Saagie" />
    </a>
    <div class="sui-o-topbar__primary">
      <button type="button" class="sui-o-topbar__button as--dropdown">
          <i class="sui-a-icon as--fa-server"></i>
      </button>
      <div class="sui-o-topbar__title">
          <small>Platform</small>
          My Platform
      </div>
    </div>
    <div class="sui-o-topbar__secondary">
        <button class="sui-o-topbar__user">
            <div class="sui-m-media-object as--middle as--gutter-sm">
                <div class="sui-m-media-object__media">
                    <div class="sui-a-avatar">
                        <img src="..." alt="JA" />
                    </div>
                </div>
                <div class="sui-m-media-object__content">
                    <div class="sui-a-label-value">
                        <div class="sui-a-label-value__value"> Julie A. </div>
                        <div class="sui-a-label-value__label"> Data Scientist </div>
                    </div>
                </div>
            </div>
        </button>
    </div>
</div>
Page content

Page content
<div class="sui-o-topbar">
    <button type="button" class="sui-o-topbar__button as--toggle-menu">
        <i class="sui-a-icon">...</i>
    </button>
    <a href="#" class="sui-o-topbar__logo">
        <img src="..." alt="Saagie" />
    </a>
    <div class="sui-o-topbar__primary">
      <a href="#" class="sui-o-topbar__button">
          <i class="sui-a-icon as--fa-thermometer-half"></i>
      </a>
      <a href="#" class="sui-o-topbar__button as--active">
          <i class="sui-a-icon">...</i>
      </a>
      <button type="button" class="sui-o-topbar__button as--dropdown">
          <i class="sui-a-icon as--fa-server"></i>
      </button>
      <div class="sui-o-topbar__title">
          <small>Platform</small>
          My Platform
      </div>
    </div>
    <div class="sui-o-topbar__secondary">
        <button class="sui-o-topbar__user">
            <div class="sui-m-media-object as--middle as--gutter-sm">
                <div class="sui-m-media-object__media">
                    <div class="sui-a-avatar">
                        <img src="..." alt="JA" />
                    </div>
                </div>
                <div class="sui-m-media-object__content">
                    <div class="sui-a-label-value">
                        <div class="sui-a-label-value__value"> Julie A. </div>
                        <div class="sui-a-label-value__label"> Data Scientist </div>
                    </div>
                </div>
            </div>
        </button>
    </div>
</div>
Page content