<aside class="sidebar">
  <button class="button button--sky button--circle sidebar__button is-tablet-visible js-sidebar-trigger">
    <svg class="icon icon--slategray icon--tiny">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-menu" />
    </svg>
  </button>
  <div class="sidebar__holder">
    <div class="sidebar__header">
      <a href="/unicorn/styleguide/template-dashboard.html" class="sidebar__logo">
        <img class="image image--small sidebar__img" src="/unicorn/assets/images/logo-symbol.svg" alt="logo">
      </a>
    </div>
    <nav class="sidebar__list">
      
        
          <li   class="sidebar__item" >
            <a href="/unicorn/styleguide/template-dashboard.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-house" />
              </svg>
              <span class="sidebar__text">Dashboard</span>
            </a>
          </li>
        
        <li class="sidebar__item ">
          <a  href="/unicorn/styleguide/template-events.html"  class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
            </svg>
            <span class="sidebar__text">Events</span>
          </a>
        </li>
        
          <li class="sidebar__item ">
            <a href="/unicorn/styleguide/template-groups.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-group" />
              </svg>
              <span class="sidebar__text">Groups</span>
            </a>
          </li>
          <li class="sidebar__item ">
            <a href="/unicorn/styleguide/template-sections.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-spots" />
              </svg>
              <span class="sidebar__text">Sections</span>
            </a>
          </li>
        
        <li class="sidebar__item  is-active ">
          <a  href="/unicorn/styleguide/template-account.html"  class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-user" />
            </svg>
            <span class="sidebar__text">Account</span>
          </a>
        </li>
        
          <li class="sidebar__item">
            <a href="#" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-chart" />
              </svg>
              <span class="sidebar__text">Metrics</span>
            </a>
          </li>
        
        <li class="sidebar__item sidebar__item--expandable">
          <a href="#" class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-lifesaver" />
            </svg>
            <span class="sidebar__text">Support</span>
          </a>
          <nav class="sidebar__submenu">
            <a href="#" rel="noopener" target="_blank" class="sidebar__sublink">Training Videos</a>
            <a href="https://eventene.freshdesk.com/support/solutions/43000202101" rel="noopener" target="_blank" class="sidebar__sublink">Using Eventene</a>
            <a href="https://eventene.freshdesk.com/support/solutions/folders/43000573012" rel="noopener" target="_blank" class="sidebar__sublink">Configuration</a>
            <a href="#" class="sidebar__sublink">Open Chat</a>
          </nav>
        </li>
      
      <li class="sidebar__item">
        <a href="/unicorn/styleguide/template-login.html" class="sidebar__link">
          <svg class="icon icon--tiny sidebar__icon">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-power" />
          </svg>
          <span class="sidebar__text">Logout</span>
        </a>
      </li>
    </nav>
  </div>
</aside>

<header class="header ">
  
    
      <div class="header__holder">
        <div class="dropdown dropdown--header">
  <div class="dropdown__holder">
    <a href="#" class="dropdown__button">
      <div class="dropdown__content dropdown__content--auto">
        <div class="dropdown__avatar">
          <svg class="icon  icon--small  icon--gray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
        </div>
        <span class="dropdown__text is-mobile-hidden"> Eventene </span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky dropdown__icon no-space-out">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down" />
      </svg>
    </a>
    <ul class="dropdown__list dropdown__list--big">
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--first">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-person" />
          </svg>
          <span class="dropdown__subtitle">Participant</span>
        </div>
      </li>
      <li class="dropdown__item ">
        <a href="/unicorn/styleguide/template-participant-events.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Josh Lion</span>
        </a>
      </li>
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--tighter">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
          <span class="dropdown__subtitle">Organizations</span>
        </div>
      </li>
      <li class="dropdown__item  is-selected ">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Eventene</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Facebook</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Meetup</span>
        </a>
      </li>
    </ul>
  </div>
</div>

        
          <ul class="breadcrumbs">
  
    <li class="breadcrumbs__item">
      <a href="/unicorn/styleguide/template-dashboard.html" class="breadcrumbs__link">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Account</a>
    </li>
  
</ul>

        
      </div>
    
  
</header>


  <aside class="sidepanel is-invisible" data-type="plans">
  
  <header class="sidepanel__header card__header card__header--center is-print-hidden">
  <h6 class="card__title">Manage Plans</h6>
</header>

  <article class=" sidepanel__content">
    <div class="sidepanel__block">
      <h6 class="subtitle subtitle--center">Plan Details</h6>
      <hr>

      <form class="simple_form form" id="new_subscription" novalidate="novalidate" action="post" accept-charset="UTF-8" data-remote="true" method="post">
        <fieldset>
          <label for="subscription_new_plan_id">Plan Type:</label>
          <select class="select optional select select--full no-space-out" data-autosubmit-button="#update-button" name="subscription[new_plan_id]" id="subscription_new_plan_id">
            <option value="1">Free ($0 / month)</option>
            <option value="2">Basic ($10 / month)</option>
            <option value="3">Pro ($25 / month)</option>
            <option selected="selected" value="4">Pro Team ($50 / month)</option>
          </select>
        </fieldset>
        <p>If you want to compare plans, <a target="_blank" href="https://www.eventene.com/pricing">click here</a></p>
        <fieldset>
          <div class="form__group form__group--unbreak">
            <div class="form__field form__field--unbreak">
              <label for="subscription_coupon">Discount Code (Optional):</label>
              <input class="string optional input input--full" type="text" name="subscription[coupon]" id="subscription_coupon">
            </div>
            <div class="form__field form__field--unbreak form__field--auto form__field--no-label">
              <button name="commit" type="submit" class="button button--square button--green no-space-out form__button" value="update" id="update-button">Apply</button>
            </div>
          </div>
        </fieldset>
        <fieldset>
          <p><strong>Order Details:</strong></p>
          <ul class="list list--bordered no-scroll">
            <li class="list__item list__item--tighter">
              <span class="list__block list__block--tighter">
                <div class="list__text">Billing Frequency:</div>
                <div class="list__content">Monthly</div>
              </span>
            </li>
            <li class="list__item list__item--tighter">
              <span class="list__block list__block--tighter">
                <div class="list__text">Plan Price:</div>
                <div class="list__content">$50 / month</div>
              </span>
            </li>
            <li class="list__item list__item--dark">
              <span class="list__block list__block--dark">
                <strong class="list__text">TOTAL</strong><strong class="list__content">$50</strong>
              </span>
            </li>
          </ul>
          <p class="alert alert--info alert--spaced">By clicking <strong>Confirm</strong> you agree to our <a href="https://eventene.freshdesk.com/support/solutions/articles/43000192467-terms-of-use" target="_blank">Terms of Use</a> and <a href="https://eventene.freshdesk.com/en/support/solutions/articles/43000192468-privacy-policy" target="_blank">Privacy Policy</a>.</p>
        </fieldset>
      </form>
    </div>
  </article>
  <footer class="footer sidepanel__footer">
  
    <button class="button button--white button--light button--stroke button--square footer__button js-sidepanel-close" type="button">Cancel</button>
    
      
        <button class="button button--square footer__button js-sidepanel-close" type="button">Confirm</button>
      
    
  
</footer>

</aside>






<main class="container">

  <div class="container__cover"></div>

  <div class="container__holder">

    <div class="container__header">
      <h4 class="container__title">Account</h4>
      <nav class="container__nav">
  
    <a href="/unicorn/styleguide/template-account.html" class="container__link  is-active ">Organization</a>
    <a href="/unicorn/styleguide/template-profile.html" class="container__link ">Profile</a>
    <a href="/unicorn/styleguide/template-billing.html" class="container__link ">Billing</a>
    <a href="/unicorn/styleguide/template-users.html" class="container__link ">Users</a>
  
  </nav>

    </div>

    <div class="container__row">

      <div class="container__column">

        <!-- ORGANIZATION DETAILS CARD -->
        <div class="card card--masonry card--overlap">
          <div class="card__header">
            <h6 class="card__title">Organization Details</h6>

            <div class="card__actions">
              <button class="button button--circle button--sky list__button" type="button">
                <svg class="icon button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
                </svg>
              </button>
              <button class="button button--circle button--red list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close" />
                </svg>
              </button>
              <button class="button button--circle button--green list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark" />
                </svg>
              </button>
            </div>
          </div>

          <div class="card__content">
            <form class="form card__form">
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Logo:</label>
                <span class="form__logo"><img src="/unicorn/assets/images/logo-full.svg"></span>
              </fieldset>
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Organization Name:</label>
                <span>Eventene</span>
              </fieldset>
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Website:</label>
                <span>www.eventene.com</span>
              </fieldset>
            </form>
          </div>
        </div>

        <!-- ORGANIZATION CONTACTS CARD -->
        <div class="card card--masonry">
          <div class="card__header">
            <h6 class="card__title">Organization Contacts</h6>

            <div class="card__actions">
              <button class="button button--circle button--sky list__button" type="button">
                <svg class="icon button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
                </svg>
              </button>
              <button class="button button--circle button--red list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close" />
                </svg>
              </button>
              <button class="button button--circle button--green list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark" />
                </svg>
              </button>
            </div>
          </div>

          <div class="card__content">
            <form class="form card__form">
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Phone Number:</label>
                <span>+1 (833) 383-6863</span>
              </fieldset>
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Address:</label>
                <span>Eventene<br>730 Arizona Ave<br>Santa Monica, CA 90401</span>
              </fieldset>
            </form>
          </div>
        </div>
      </div>

      <div class="container__column">

        <!-- PROFILE CARD -->
        <div class="card card--masonry">
          <div class="card__header">
            <h6 class="card__title">Account Info</h6>
          </div>

          <div class="card__content">
            <ul class="list">
              <li class="list__item">
                <div class="list__block">
                  <div class="list__data">
                    <strong class="list__label">Account Type:</strong>
                    <span>Free</span>
                  </div>
                  <button class="button button--circle button--sky list__button js-sidepanel-open tooltip" type="button" data-tooltip="Manage">
                    <svg class="icon button__icon">
                      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-settings" />
                    </svg>
                  </button>
                </div>
              </li>
              <li class="list__item">
                <div class="list__block">
                  <div class="list__data">
                    <strong class="list__label">Account Status:</strong>
                    <span class="is-success">
                      <svg class="icon icon--tiny icon--green">
                        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dot" />
                      </svg>
                      Active
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- PAYMENT ACCOUNTS CARD -->
        <div class="card card--masonry">
          <div class="card__header">
            <h6 class="card__title">Payment Accounts</h6>
          </div>

          <div class="card__content">
            <ul class="list">
              <li class="list__item">
                <div class="list__block">
                  <div class="list__data">
                    <strong class="list__label">Stripe:</strong>
                    <span>Not Linked</span>
                  </div>
                  <button class="button button--stripe list__button">
                    <div class="button__holder">
                      <svg class="icon icon--white button__icon">
                          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-stripe" />
                        </svg>
                        <span class="button__text">Link Stripe</span>
                      </div>
                  </button>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- ROSTERS CARD -->
        <div class="card card--masonry">
          <div class="card__header">
            <h6 class="card__title">Rosters</h6>

            <div class="card__actions">
              <button class="button button--circle button--sky list__button" type="button">
                <svg class="icon button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
                </svg>
              </button>
              <button class="button button--circle button--red list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close" />
                </svg>
              </button>
              <button class="button button--circle button--green list__button is-hidden" type="button">
                <svg class="icon icon--white button__icon">
                  <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark" />
                </svg>
              </button>
            </div>
          </div>

          <div class="card__content">
            <form class="form card__form">
              <fieldset class="form__holder card__block">
                <label class="no-space-out">Lists:</label>
                <span>Hike, Dinner</span>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>

<!-- DEMO ONLY -->
<span class="s-main__bg"></span>