City of Ghent Style Guide - Version 3.1.1

Authentication

There are no notes for this item.

{% set Content %}
  <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>{{ 'James McGill' }}</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>
{% endset %}

{% if accordion %}
  <div class="authentication 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 McGill</span>
      </button>

      <div id="{{ id|default('mijn_gent_content') }}" class="accordion--content"
           aria-hidden="true" hidden>
        {{ Content }}
      </div>

    {% endif %}

  </div>

{% else %}

  <div class="authentication">
    {% if auth == 'false' %}

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

    {% else %}
      {{ Content }}
    {% endif %}
  </div>

{% endif %}
 
<!-- Logged In -->
<div class="authentication accordion">

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

    <div id="mijn_gent_content" class="accordion--content" aria-hidden="true" hidden>
        <article class="content">
            <h2>Mijn bibliotheek</h2>
            <section class="profile">
                <figure><img src="../../styleguide/img/stock/user_avatar.jpg" alt="Username" /></figure>
                <div class="profile-info">
                    <span>James McGill</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>


<!-- Logged Out -->
<div class="authentication accordion">

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

    <div id="mijn_gent_content" class="accordion--content" aria-hidden="true" hidden>
        <article class="content">
            <h2>Mijn bibliotheek</h2>
            <section class="profile">
                <figure><img src="../../styleguide/img/stock/user_avatar.jpg" alt="Username" /></figure>
                <div class="profile-info">
                    <span>James McGill</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>


<!-- No Image -->
<div class="authentication accordion">

    <button aria-expanded="false" aria-controls="mijn_gent_content" class="toggle accordion--button">
        <span class="avatar">j</span>
        <span>James McGill</span>
    </button>

    <div id="mijn_gent_content" class="accordion--content" aria-hidden="true" hidden>
        <article class="content">
            <h2>Mijn bibliotheek</h2>
            <section class="profile">
                <span class="avatar">j</span>
                <div class="profile-info">
                    <span>James McGill</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>


/* Logged In */
{
  "auth": true,
  "image": true,
  "accordion": true
}


/* Logged Out */
{
  "auth": false,
  "image": true,
  "accordion": true
}


/* No Image */
{
  "auth": true,
  "image": false,
  "accordion": true
}