Menu Lists

A single menu item in the account menu.

Note: Use the class .js-track-tools-dropdown-link-click to track clicks on My Wedding Planner dropdown links.

  • I LINK TO THE ACCOUNT 
    • <li class="menu-list-item">
  <a href="/my-account-item" class="menu-list-item__link">I LINK TO THE ACCOUNT</a>
</li>

    A full menu list

    <ul class="menu-list">
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Wedding Website</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Registry</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Guest List Manager</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Favorites</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Checklist</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Budgeter</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Account Settings</a>
  </li>
  <li class="menu-list-item">
    <a href="/my-account-item" class="menu-list-item__link">Help + Feedback</a>
  </li>
</ul>

    Navigation

    Signup Block

    The signup block

    The signup block is a small component with a signup button and backup links in case the user is already a member. Note the .js-header-nav-signup-button class which is specific to the signup block in the header navigation and is used for targeting to add modal-opening behavior to the button. And the .js-header-nav-login-button targets the "Log In" link similarly.

    <div class="signup-block">
  <div class="row">
    <div class="col-xs-12">
      <a href="/account/profile?application_id=proactive&action_id=proactive" class="btn btn-primary btn-block js-header-nav-signup-button">SIGN UP</a>
      </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="signup-block__subtext">
        <span class="content label">Already a member?</span> <a class="content link" href="/account">Log In Here</a>
      </div>
    </div>
  </div>
</div>

    Toggles

    Toggle buttons are used to tab between different types or views of content. Selected state is white, rollover is blue.

    Toggles with Text

    <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

    Toggles with Icons

    <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <span class="icon icon-general-grid"></span>
        <input type="radio" name="options" id="option1" checked>
    </label>
    <label class="btn btn-default">
        <span class="icon icon-general-single"></span>
        <input type="radio" name="options" id="option2">
    </label>
</div>

    Toggles with Tiered Text

    <div class="btn-group tiered" data-toggle="buttons">
    <label class="btn btn-default">
        <span>8</span>
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-default">
        <span>103</span>
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-default active">
        <span>6</span>
        <input type="radio" name="options" id="option3" checked> Option 3 (selected)
    </label>
</div>

    Toggles with Anchor Tag links

    Link 1 Link 2 Link 3 
    <div class="btn-group anchor">
  <a class="btn btn-default" href="#">
    Link 1
  </a>
  <a class="btn btn-default" href="#">
    Link 2
  </a>
  <a class="btn btn-default" href="#">
    Link 3
  </a>
</div>

    Breadcrumbs

    NOTE: Attach the class "xs-only" to the list item that will display on mobile. All other list items will be hidden and the xs-only anchor tag tap area will be expanded to fill the entire background of the mobile breadcrumb.

    3. Data 
    <ol class="breadcrumb">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="#">
            <span itemprop="title">Home</span>
        </a>
    </li>
    <li class="xs-only" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="#">
            <span itemprop="title">Library</span>
        </a>
    </li>
    <li class="active">
        <span itemprop="title">Data</span>
    </li>
</ol>

    List

    List with content label and value, and example where value is a link (dividers: mobile only)

    <ul class="list-unstyled xs-divider">
    <li>
        <span class="content label">
            Content Label
        </span>
        <span class="content value">
            Content Value
        </span>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <span class="content value">
            Content Value
        </span>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <span class="content value">
            Content Value
        </span>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <a href="#">
          <span class="content value">
              Content Value
          </span>
        </a>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <a href="#">
          <span class="content value">
              Content Value
          </span>
        </a>
    </li>
</ul>

    Horizontal list (will display horizontally on desktop only)

    <ul class="list-unstyled xs-divider list-horizontal">
    <li>
        <span class="content label">
            Content Label
        </span>
        <span class="content value">
            Content Value
        </span>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <span class="content value">
            Content Value
        </span>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <a href="#">
          <span class="content value">
              Content Value
          </span>
        </a>
    </li>
    <li>
        <span class="content label">
            Content Label
        </span>
        <a href="#">
          <span class="content value">
              Content Value
          </span>
        </a>
    </li>
</ul>

    List Group (dividers: desktop and mobile)

    • List H2

      List secondary info

    • List H2

      List secondary info

    • List H2

      List secondary info

    • List H2

      List secondary info

    • List H2

      List secondary info 
    <ul class="list-unstyled xs-lg-divider">
    <li>
        <h2>List H2</h2>
        <span>List secondary info</span>
    </li>
    <li>
        <h2>List H2</h2>
        <span>List secondary info</span>
    </li>
    <li>
        <h2>List H2</h2>
        <span>List secondary info</span>
    </li>
    <li>
        <h2>List H2</h2>
        <span>List secondary info</span>
    </li>
    <li>
        <h2>List H2</h2>
        <span>List secondary info</span>
    </li>
</ul>

    Pagination

    Caret Pagination (Active)

    4 of 36 
    <div class="caret-pagination">
  <a href="#"><span class="icon icon-general-caret-left"></span></a>
  <span class="caret-page">4 of 36</span>
  <a href="#"><span class="icon icon-general-caret-right"></span></a>
</div>

    Caret Pagination (Inactive)

    1 of 1 
    <div class="caret-pagination">
    <span class="icon icon-general-caret-left inactive"></span>
    <span class="caret-page">1 of 1</span>
    <span class="icon icon-general-caret-right inactive"></span>
</div>

    Pagination Circles (Small)

    <div class="row">
  <div class="col-md-12">
    <ul class=" pagination-circles">
      <li><a href="#">1</a></li>
      <li><a href="#" class="active">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </div>
</div>