USER DASHBOARD

by Greggg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<div data-uk-observe class="uk-container uk-container-center">

  <a href="#" data-uk-modal="{target:'.app-user-dashboard-modal', center:true}">Open User Dashboard</a>
</div>

<div class="uk-modal app-user-dashboard-modal">
  <div class="uk-modal-dialog uk-modal-dialog-blank">
    <button class="uk-modal-close uk-close" type="button"></button>


    <div class="uk-grid app-user-dashboard">
 
      <div class="uk-width-1-1 uk-margin-large-bottom">
        <h3> Greg B.</h3>
        <a href="#">Edit Profil</a> | <a href="#">New Website</a> | <a href="#">Logout</a>
      </div>

      <div onclick="alert('Login to website in admin view')" class="uk-width-large-1-3 uk-width-medium-1-2 uk-margin-bottom app-user-website">
        <a class="uk-panel uk-panel-hover uk-panel-box">
          <div class="uk-panel-teaser">
            <img src="http://i.imgur.com/ggtp7ck.jpg">
            <div>
              <span class="uk-text-large">devan-freelancer</span>
              <br>
              <span class="uk-text-muted">Admin</span>
              <span class="uk-badge uk-badge-success">STANDARD</span>
            </div>
          </div>
        </a>
      </div>

      <div onclick="alert('Login to website in admin view')" class="uk-width-large-1-3 uk-width-medium-1-2 uk-margin-bottom app-user-website">
        <a class="uk-panel uk-panel-hover uk-panel-box">
          <div class="uk-panel-teaser">
            <img src="http://i.imgur.com/R2LtCD1.jpg">
            <div>
              <span class="uk-text-large">greg-company</span>
              <br>
              <span class="uk-text-muted">Owner</span>
              <span class="uk-badge uk-badge-danger">EXPIRED</span>
            </div>
          </div>
        </a>
      </div>

      <div onclick="alert('Login to website in admin...

CSS

.app-user-dashboard {
  padding: 50px
}

.uk-panel-teaser div {
  margin: 15px 15px 0 15px;
  position: relative
}

.uk-panel-teaser > div > .uk-badge {
  position: absolute;
  right: 10px;
  top: 15px;
}

.uk-panel-box {
  padding: 15px;
  background: #fafafa;
  color: #666;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}