component

Box

The box element is a container with padding and box shadow.

  <section class="example">
    <div class="box rounded">Default box example</div>
  </section>

Default box example

It's a container so you can easily include other components:

  <section class="example">
    <form class="box">
      <div class="field">
        <label class="label">
          Email
        </label>
        <div class="control">
          <input class="input" type="email" placeholder="e.g idd@inboundcycle.com">
        </div>
      </div>
      <!-- password -->
      <div class="field">
        <label class="label">
          Password
        </label>
        <div class="control">
          <input class="input" type="password" placeholder="*******">
        </div>
      </div>

      <div class="field">
        <button class="button is-primary">Sign in</button>
      </div>
    </form>
  </section>

Variables

  :root {
    --box-padding: var(--space-xs, 1.25rem);
    --box-radius : var(--radius-sm, 0.25rem);
    --box-shadow : var(--shadow-sm, 0px 2px 6px rgba(0, 0, 0, 0.25));
  }