SIA Web Design Library

Dashboard block: Account Settings

No notes defined.

<div class='c-dashboard-block'>

    <header class='c-dashboard-block__header'>
        <h1 class='c-heading c-heading--minor c-dashboard-block__heading'>
            Account settings
        </h1>
    </header>

    <div class='c-dashboard-block__content-wrapper'>

        <div class='c-fields c-fields--account-settings c-fields__fields'>

            <dl class='c-generic-field c-generic-field--account-settings c-fields__generic-field'>
                <dt class='c-generic-field__label c-generic-field--text__label c-generic-field__label c-generic-field__label--visually-hidden'>Photo</dt>
                <dd class='c-generic-field__input c-generic-field--text__input c-generic-field__input__item c-generic-field__input'><span class='c-headshot'><img class='c-headshot__image' src='/images/portrait.jpg' alt=''></dd>
            </dl>

            <dl class='c-generic-field c-generic-field--account-settings c-fields__generic-field'>
                <dt class='c-generic-field__label c-generic-field--text__label c-generic-field__label c-generic-field__label--inline'>Name</dt>
                <dd class='c-generic-field__input c-generic-field--text__input c-generic-field__input__item c-generic-field__input'>Johnny Bee</dd>
            </dl>

            <dl class='c-generic-field c-generic-field--account-settings c-fields__generic-field'>
                <dt class='c-generic-field__label c-generic-field--text__label c-generic-field__label c-generic-field__label--inline'>Email</dt>
                <dd class='c-generic-field__input c-generic-field--text__input c-generic-field__input__item c-generic-field__input'>mail@mail.com</dd>
            </dl>

        </div>
    </div>

    <footer class='c-dashboard-block__footer'>
        <div class='c-action-bar c-dashboard-block__action-bar'>
            <div class='c-action-bar__links '>
                <a class='c-link c-link--undefined c-link--with-icon c-link--minimal ' href="" itemprop="item" itemid=""><span itemprop="name">Change settings</span></a>
            </div>
        </div>
    </footer>
</div>
 
<div class='{{ get_component_class( 'dashboard-block', display ) }}'>
    
    {% if heading or button %}
        <header class='c-dashboard-block__header'>
            {% if heading %}
                {% include get_template( 'heading', 'unit' ) with heading|merge( { display: { component: 'dashboard-block', modifiers: [ 'minor' ] } } ) %}
            {% endif %}
            {% if button %}
                <div class='c-dashboard-block__header__actions'>
                    {% include get_template( 'button', 'base' ) with button|merge( { display: { component: 'dashboard-block', modifiers: [ 'small' ] } } ) %}
                </div>
            {% endif %}
        </header>
    {% endif %}
    
    <div class='c-dashboard-block__content-wrapper'>
        {% if stats %}
            {% include get_template( 'figures', 'group' ) with stats %}
        {% endif %}

        {% if issues %}
            {% include get_template( 'task-list', 'unit' ) with issues|merge( { display: { component: entityType } } ) %}
        {% endif %}

        {% if collection %}
            {% include get_template( 'collection', 'group' ) with collection %}
        {% elseif entities %}
            {% include get_template( 'entities', 'group' ) with entities|merge( { 
                display: { component: 'dashboard-block__entities' },
            } ) %}
        {% elseif entity %}
            {% if entity.rendered %}
                {{ entity.rendered }}
            {% else %}
                {% include get_entity_template( entityTemplate, entity.display ) with entity %}
            {% endif %}
        {% elseif taskList %}
            {% include get_template( 'task-list', 'unit' ) with taskList|merge( { 
                display: { component: 'dashboard-block' },
                heading: NULL,
            } ) %}
        {% elseif fields %}
            {% include get_template( 'fields', 'group' ) with fields %}
        {% elseif table %}
            {% include get_template( 'table', 'group' ) with table %}
        {% elseif indexCard %}
            {% include get_template( 'index-card', 'unit' ) with indexCard %}
        {% elseif timeline %}
            {% include get_template( 'timeline', 'unit' ) with timeline %}
        {% elseif blankSlate %}
            {% include get_template( 'blank-slate', 'unit' ) with blankSlate|merge( { 
                display: { component: 'dashboard-block' },
                button: NULL
            } ) %}
        {% endif %}
    </div>

    {% if links %}
        <footer class='c-dashboard-block__footer'>
            {% include get_template( 'action-bar', 'unit' ) with {
                display: {
                    component: 'dashboard-block'
                },
                links: links,
                button: NULL,
            } %}
        </footer>
    {% endif %}
</div>
 
{
  "heading": {
    "text": "Account settings"
  },
  "button": null,
  "icon": {
    "display": {
      "component": "dashboard-block",
      "modifiers": [
        "x-large"
      ]
    },
    "basename": "noun_Quality badge_1353889.svg"
  },
  "blankSlate": {
    "icon": {
      "display": {
        "component": "blank-slate",
        "modifiers": [
          "x-large"
        ]
      },
      "basename": "noun_Quality badge_1353889.svg"
    },
    "header": {
      "heading": {
        "display": {
          "component": "blank-slate"
        },
        "text": "Meetings"
      }
    },
    "lead": {
      "content": "<p>A blank slate is presented when a screen or a screen section is empty.</p>"
    }
  },
  "theme": "awareness",
  "links": [
    {
      "url": "#",
      "text": "Change settings"
    }
  ],
  "fields": {
    "display": {
      "component": "fields",
      "modifiers": [
        "account-settings"
      ]
    },
    "items": [
      {
        "label_display": "visually-hidden",
        "field_name": "field_generic",
        "field_type": "text",
        "label": "Photo",
        "items": [
          {
            "content": "<span class='c-headshot'><img class='c-headshot__image' src='/images/portrait.jpg' alt=''>"
          }
        ]
      },
      {
        "label_display": "inline",
        "field_name": "field_generic",
        "field_type": "text",
        "label": "Name",
        "items": [
          {
            "content": "Johnny Bee"
          }
        ]
      },
      {
        "label_display": "inline",
        "field_name": "field_generic",
        "field_type": "text",
        "label": "Email",
        "items": [
          {
            "content": "mail@mail.com"
          }
        ]
      }
    ]
  }
}