There are no notes for this item.

<div class="mijn-gent-block accordion">

  {% if auth == 'false' %}

   {% include '@link' with {
  'modifier': 'login-link',
  'link': 'javascript:(void);',
  'text': 'Aanmelden'
  } %}

  {% else %}

  <button aria-expanded="false"
          aria-controls="{{ id|default('mijn_gent_content') }}"
          class="toggle accordion--button">
    {% if image %}
      {% include '@image' with {
      'src': '/styleguide/img/stock/user_avatar.jpg' | path,
        'alt_text': 'Username',
        'ratio': null
      } %}
    {% else %}
      <span class="avatar">j</span>
    {% endif %}
    <span>James M.</span>
  </button>

  <div id="{{ id|default('mijn_gent_content') }}" class="accordion--content" aria-hidden="true" hidden>
    <article class="content">
      {% include '@heading' with {
        'type': 'h2',
        'heading_text': 'Mijn bibliotheek'
      } %}
      <section class="profile">
        {% if image %}
           {% include '@image' with {
          'src': '/styleguide/img/stock/user_avatar.jpg' | path,
            'alt_text': 'Username',
            'ratio': null
          } %}
        {% else %}
          <span class="avatar">j</span>
        {% endif %}
        <div class="profile-info">
          <span>{{ 'John Doe' }}</span>
          {% include '@link' with {
          'link': '#',
          'text': 'Show profile',
          'modifier': 'button button-primary button-small'
          } %}
        </div>
      </section>
      <section>
        {% include '@list' with {
        'type': 'unordered',
        'modifier': 'links',
        'items': [
        "<a href='javascript:(void);'>Overzicht</a>",
        "<a href='javascript:(void);'>Leestips</a>"
        ]
        } %}
      </section>
      <section>
         {% include '@heading' with {
          'type': 'h2',
          'heading_text': 'Mijn gent'
        } %}

        {% include '@list' with {
        'type': 'unordered',
        'modifier': 'links',
        'items': [
        "<a href='javascript:(void);'>Mijn profiel</a>",
        "<a href='javascript:(void);'>Nieuwsbrieven</a>",
        "<a href='javascript:(void);'>Historiek</a>"
        ]
        } %}
      </section>
      <footer>
        {% include '@link' with {
        'link': 'javascript:(void);',
        'modifier': 'button button-small button-secondary',
        'type': 'unordered',
        'text': 'Afmelden'
        } %}
      </footer>
    </article>
  </div>
  {% endif %}
</div>
<div class="mijn-gent-block accordion">

    <button aria-expanded="false" aria-controls="mijn_gent_content" class="toggle accordion--button">
        <img src="../../styleguide/img/stock/user_avatar.jpg" alt="Username" />

        <span>James M.</span>
    </button>

    <div id="mijn_gent_content" class="accordion--content" aria-hidden="true" hidden>
        <article class="content">
            <h2>Mijn bibliotheek</h2>
            <section class="profile">
                <img src="../../styleguide/img/stock/user_avatar.jpg" alt="Username" />

                <div class="profile-info">
                    <span>John Doe</span>
                    <a href='#' class="button button-primary button-small">
                        Show profile</a>
                </div>
            </section>
            <section>

                <ul class="links">
                    <li><a href='javascript:(void);'>Overzicht</a></li>
                    <li><a href='javascript:(void);'>Leestips</a></li>
                </ul>

            </section>
            <section>
                <h2>Mijn gent</h2>

                <ul class="links">
                    <li><a href='javascript:(void);'>Mijn profiel</a></li>
                    <li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
                    <li><a href='javascript:(void);'>Historiek</a></li>
                </ul>

            </section>
            <footer>
                <a href='javascript:(void);' class="button button-small button-secondary">
                    Afmelden</a>
            </footer>
        </article>
    </div>
</div>
{
  "auth": null,
  "image": true
}
  • Content:
    .mijn-gent-block {
      display: flex;
      position: relative;
      justify-content: flex-end;
    
      .avatar {
        flex-shrink: 0;
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 50%;
        background-color: #29cfc9;
        color: #fff;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 2.3rem;
        text-align: center;
        text-transform: uppercase;
      }
    
      .login-link {
        text-overflow: ellipsis;
        overflow: hidden;
    
        &::after {
          content: none;
        }
      }
    
      img {
        border-radius: 50%;
      }
    
      .accordion--button {
        display: flex;
        align-items: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    
        * {
          vertical-align: middle;
        }
    
        img {
          width: 2.3rem;
          height: 2.3rem;
          object-fit: cover;
        }
    
        span {
          display: none;
          padding: 0 .5em;
          font-weight: 600;
    
          @include tablet {
            display: inline-block;
          }
        }
    
        &::before {
          line-height: 0;
        }
    
        span.avatar {
          display: block;
        }
      }
    
      .accordion--content {
        position: absolute;
        top: 100%;
        right: 0;
        width: calc(100vw - 2 * #{$gutter-width});
        max-width: $bp-mobile;
        margin-top: .5rem;
        transition: max-height .3s ease-in-out;
        border-radius: border-radius('radius-1');
        background: color('white');
        box-shadow: 0 2px 12px 0 rgba(35, 51, 58, .25);
        z-index: z('mijn-gent');
      }
    
      .content {
        padding: 1.2rem;
    
        h2 {
          @extend %h3;
        }
    
        > h2 {
          margin-bottom: 0;
        }
    
        section {
          @include theme('border-color', 'color-primary--lighten-4', 'mijn_gent-border-color');
    
          padding: .6rem 0;
          border-top: 2px solid;
    
          .links {
            margin: 0;
    
            ///
            /// All links shouldn't have an indicator.
            ///
            a {
              @include reset-link-background;
              @include link-underlined;
            }
          }
        }
    
        .profile {
          display: flex;
          padding-bottom: 1rem;
          border-top: 0;
    
          &-info {
            span {
              display: block;
              font-size: .7rem;
            }
          }
    
          img {
            align-self: flex-start;
            width: 3.3rem;
            height: 3.3rem;
            margin-right: $gutter-width;
            object-fit: cover;
          }
    
          .avatar {
            width: 3.3rem;
            height: 3.3rem;
            margin-right: 1.2rem;
            line-height: 3.3rem;
          }
        }
      }
    }
    
  • URL: /components/raw/mijn-gent-block/_mijn-gent-block.scss
  • Filesystem Path: components/31-molecules/mijn-gent-block/_mijn-gent-block.scss
  • Size: 2.4 KB