Features

Abide

<form data-abide novalidate>
              <div data-abide-error class="alert callout" style="display: none;">
                <p><i class="fi-alert"></i> There are some errors in your form.</p>
              </div>
              <div class="row">
                <div class="small-12 columns">
                  <label>Number Required
                    <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
                    <span class="form-error">
                      Yo, you had better fill this out, it's required.
                    </span>
                  </label>
                  <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
                </div>
                <div class="small-12 columns">
                  <label>Nothing Required!
                    <input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore>
                  </label>
                  <p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p>
                </div>
                <div class="small-12 columns">
                  <label>Password Required
                    <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
                    <span class="form-error">
                      I'm required!
                    </span>
                  </label>
                  <p class="help-text" id="exampleHelpText">Enter a password please.</p>
                </div>
                <div class="small-12 columns">
                  <label>Re-enter Password
                    <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
                    <span class="form-error">
                      Hey, passwords are supposed to match!
                    </span>
                  </label>
                  <p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
                </div>
              </div>
              <div class="row">
                <div class="medium-6 columns">
                  <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
                    <input type="text" placeholder="http://foundation.zurb.com" pattern="url">
                  </label>
                </div>
                <div class="medium-6 columns">
                  <label>European Cars, Choose One, it can't be the blank option.
                    <select id="select" required>
                      <option value=""></option>
                      <option value="volvo">Volvo</option>
                      <option value="saab">Saab</option>
                      <option value="mercedes">Mercedes</option>
                      <option value="audi">Audi</option>
                    </select>
                  </label>
                </div>
              </div>
              <div class="row">
                <fieldset class="large-6 columns">
                  <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
                  <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
                  <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
                  <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
                </fieldset>
                <fieldset class="large-6 columns">
                  <legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
                  <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
                  <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
                  <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>
                </fieldset>
                <fieldset class="large-6 columns">
                  <legend>Check these out</legend>
                  <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
                  <input id="checkbox2" type="checkbox" required><label for="checkbox2">Checkbox 2</label>
                  <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
                </fieldset>
              </div>
              <div class="row">
                <fieldset class="large-6 columns">
                  <button class="button" type="submit" value="Submit">Submit</button>
                </fieldset>
                <fieldset class="large-6 columns">
                  <button class="button" type="reset" value="Reset">Reset</button>
                </fieldset>
              </div>
            </form>

Number Required Yo, you had better fill this out, it's required.

Here's how you use this input field!

Nothing Required!

This input is ignored by Abide using `data-abide-ignore`

Password Required I'm required!

Enter a password please.

Re-enter Password Hey, passwords are supposed to match!

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.

European Cars, Choose One, it can't be the blank option.

Choose Your Favorite, and this is required, so you have to pick one. Red Blue Yellow

Choose Your Favorite - not required, you can leave this one blank. Red Blue Yellow

Check these out Checkbox 1 Checkbox 2 Checkbox 3

Accordion

<ul class="accordion" data-accordion role="tablist">
              <li class="accordion-item is-active">
                <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
                <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
                <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
                <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
                  Panel 1. Lorem ipsum dolor
                </div>
              </li>
              <li class="accordion-item">
                <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
                <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
                <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
                <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
                  Panel 2. Lorem ipsum dolor
                </div>
              </li>
              <li class="accordion-item">
                <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
                <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
                <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
                <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
                  Panel 3. Lorem ipsum dolor
                </div>
              </li>
            </ul>

Accordion 1
Panel 1. Lorem ipsum dolor
Accordion 1
Accordion 1

<ul class="vertical menu" data-accordion-menu>
          <li>
            <a href="#">Item 1</a>
            <ul class="menu vertical nested is-active">
              <li>
                <a href="#">Item 1A</a>
                <ul class="menu vertical nested">
                  <li><a href="#">Item 1Ai</a></li>
                  <li><a href="#">Item 1Aii</a></li>
                  <li><a href="#">Item 1Aiii</a></li>
                </ul>
              </li>
              <li><a href="#">Item 1B</a></li>
              <li><a href="#">Item 1C</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Item 2</a>
            <ul class="menu vertical nested">
              <li><a href="#">Item 2A</a></li>
              <li><a href="#">Item 2B</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3</a></li>
        </ul>

Badge

<span class="secondary badge">2</span>
        <span class="success badge">3</span>
        <span class="alert badge">A</span>
        <span class="warning badge">B</span>

2 3 A B

Breadcrumbs

<nav aria-label="You are here:" role="navigation">
          <ul class="breadcrumbs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li class="disabled">Gene Splicing</li>
            <li>
              <span class="show-for-sr">Current: </span> Cloning
            </li>
          </ul>
        </nav>

Button

<!-- Anchors (links) -->
        <a href="about.html" class="button">Learn More</a>
        <a href="#features" class="button">View All Features</a>

        <!-- Buttons (actions) -->
        <button type="button" class="success button">Save</button>
        <button type="button" class="alert button">Delete</button>

        <a class="tiny button" href="#">So Tiny</a>
        <a class="small button" href="#">So Small</a>
        <a class="large button" href="#">So Large</a>
        <a class="expanded button" href="#">Such Expand</a>

        <div class="button-group">
          <a class="button">One</a>
          <a class="button">Two</a>
          <a class="button">Three</a>
        </div>

Primary Secondary Hollow So Tiny So Small So Large Such Expand

One Two Three