IOP Nucleus

Buttons 

<h2 class="sg-subtitle">Primary</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button iop-button--primary">
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button iop-button--primary">
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button iop-button--primary">
      <span>Button</span>
    </button>
    </div>
</div>

<h2 class="sg-subtitle">Secondary (default)</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button">
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button">
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button">
      <span>Button</span>
    </button>
    </div>
</div>

<h2 class="sg-subtitle">Tertiary</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button iop-button--tertiary">
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button iop-button--tertiary">
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button iop-button--tertiary">
      <span>Button</span>
    </button>
    </div>
</div>

<h2 class="sg-subtitle">Block (full width)</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button iop-button--block">
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button iop-button--primary iop-button--block">
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button iop-button--block">
      <span>Button</span>
    </button>
    </div>
</div>

<h2 class="sg-subtitle">Orbital</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button iop-button--orbital">
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button iop-button--orbital">
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button iop-button--orbital">
      <span>Button</span>
    </button>
    </div>
</div>

<h2 class="sg-subtitle">Image button</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;button&gt;</code>
        <button type="button" class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d" alt="Image button 1">
      </span>
      <span>Button</span>
    </button>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;a&gt;</code>
        <a href="#0" class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d" alt="Image button 2">
      </span>
      <span>Button</span>
    </a>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;button [disabled]&gt;</code>
        <button type="button" disabled class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d" alt="Image button 3">
      </span>
      <span>Button</span>
    </button>
    </div>
</div>
 
<h2 class="sg-subtitle">Primary</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button iop-button--primary">
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button iop-button--primary">
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button iop-button--primary">
      <span>Button</span>
    </button>
  </div>
</div>

<h2 class="sg-subtitle">Secondary (default)</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button">
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button">
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button">
      <span>Button</span>
    </button>
  </div>
</div>

<h2 class="sg-subtitle">Tertiary</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button iop-button--tertiary">
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button iop-button--tertiary">
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button iop-button--tertiary">
      <span>Button</span>
    </button>
  </div>
</div>

<h2 class="sg-subtitle">Block (full width)</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button iop-button--block">
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button iop-button--primary iop-button--block">
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button iop-button--block">
      <span>Button</span>
    </button>
  </div>
</div>

<h2 class="sg-subtitle">Orbital</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button iop-button--orbital">
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button iop-button--orbital">
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button iop-button--orbital">
      <span>Button</span>
    </button>
  </div>
</div>

<h2 class="sg-subtitle">Image button</h2>
<div class="row">
  <div class="col-sm-4">
    <code class="sg-label">&lt;button&gt;</code>
    <button type="button" class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="{{ dummyImageUrl }}" alt="Image button 1">
      </span>
      <span>Button</span>
    </button>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;a&gt;</code>
    <a href="#0" class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="{{ dummyImageUrl }}" alt="Image button 2">
      </span>
      <span>Button</span>
    </a>
  </div>
  <div class="col-sm-4">
    <code class="sg-label">&lt;button [disabled]&gt;</code>
    <button type="button" disabled class="iop-button iop-button--image">
      <span class="iop-button__image">
        <img src="{{ dummyImageUrl }}" alt="Image button 3">
      </span>
      <span>Button</span>
    </button>
  </div>
</div>
 
{
  "dummyImageUrl": "https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d"
}

There are no notes for this item.