SIA Web Design Library

Dashboard list item: Sample

No notes defined.

<div class='c-dashboard-list-item'>

    <div class='c-dashboard-list-item__header'>
        <div class='c-meta c-dashboard-list-item__meta'>

            <span class='c-meta__freeform'>
                Founder, My Own Venture | Austria 2020
            </span>
        </div>
        <p class='c-incubation_phase incubation_phase type-incubation_phase c-incubation_phase--one-liner' style='background-image: url( ../../graphic/flags/at.svg );'>
            <a class='c-link c-link--muted ' href="#" itemprop="item" itemid="#"><span itemprop="name">Austria 2020</span></a>
        </p>
    </div>

    <div class='c-dashboard-list-item__content-wrapper'>
        <span class='c-media c-dashboard-list-item__media'>
            <img class='c-media__image' src='https://www.gravatar.com/avatar/2edb25de296c1f4a3993de6d65a9b964?d=identicon&s=400' />
        </span>
        <div class='c-dashboard-list-item__content'>
            <h1 class='c-heading c-heading--minor c-dashboard-list-item__heading'>
                Sample dashboard item
            </h1>

            <div class='c-meta c-dashboard-list-item__meta'>

                <span class='c-meta__freeform'>
                    Last seen: 20.10.2020 | Profile status: complete
                </span>
            </div>
        </div>
    </div>

    <footer class='c-dashboard-list-item__footer'>
        <div class='c-action-bar c-dashboard-list-item__action-bar'>
            <div class='c-action-bar__actions'>
                <a class='c-button c-button--small' href="#">Take action</a>
            </div>
            <div class='c-action-bar__links '>
                <a class='c-link c-link--edit c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Edit</span></a> <a class='c-link c-link--delete c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Delete</span></a>
            </div>
        </div>
    </footer>
</div>
 
<div class='{{ get_component_class( 'dashboard-list-item', display ) }}'>
    {% if workflowInfo %}
        {% include get_template( 'workflow-info', 'unit' ) with workflowInfo %}
    {% endif %}

    {% if meta or incubationPhase %}
        <div class='c-dashboard-list-item__header'>
            {% if meta %}
                {% include get_template( 'meta', 'unit') with meta|merge( { display: { component: 'dashboard-list-item' } } ) %}
            {% endif %}
            {% if incubationPhase %}
                {% include get_entity_template( 'incubation-phase', incubationPhase.display ) with incubationPhase %}
            {% endif %}
        </div>
    {% endif %}

    <div class='c-dashboard-list-item__content-wrapper'>
        {% if media %}
            {% include get_template( 'media', 'unit') with media|merge( { display: { component: 'dashboard-list-item' } } ) %}
        {% endif %}
        
        <div class='c-dashboard-list-item__content'>
            {% include get_template( 'heading', 'unit' ) with heading|merge( { display: { component: 'dashboard-list-item', modifiers: [ 'minor' ] } } ) %}
        
            {% if details %}
                {% include get_template( 'meta', 'unit') with details|merge( { display: { component: 'dashboard-list-item' } } ) %}
            {% endif %}

            {% if status_message is not empty %}
                <p class='c-dashboard-list-item__message c-dashboard-list-item__message--{{ status_message.type }}'>{{ status_message.text|raw }}</p>
        {% endif %}
        </div>
    </div>

    {% if links or button %}
        <footer class='c-dashboard-list-item__footer'>
            {% include get_template( 'action-bar', 'unit' ) with {
                display: {
                    component: 'dashboard-list-item'
                },
                links: links,
                button: button
            } %}
        </footer>
    {% endif %}
</div>
 
{
  "theme": "support",
  "meta": {
    "items": [
      "Founder, My Own Venture",
      "Austria 2020"
    ]
  },
  "details": {
    "items": [
      "Last seen: 20.10.2020",
      "Profile status: complete"
    ]
  },
  "incubationPhase": {
    "entityType": "incubation_phase",
    "display": {
      "view_mode": "one-liner"
    },
    "countryMap": null,
    "country": {
      "iso": "at"
    },
    "heading": {
      "display": {
        "modifiers": [
          "listicle"
        ]
      },
      "text": "Austria 2020",
      "url": "#"
    }
  },
  "media": {
    "src": "https://www.gravatar.com/avatar/2edb25de296c1f4a3993de6d65a9b964?d=identicon&s=400"
  },
  "heading": {
    "text": "Sample dashboard item"
  },
  "button": {
    "text": "Take action",
    "url": "#"
  },
  "links": [
    {
      "icon": "edit",
      "href": "#",
      "text": "Edit"
    },
    {
      "icon": "delete",
      "href": "#",
      "text": "Delete"
    }
  ]
}