Object Card

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="object-card object-card--color-3">
    <div class="object-card__inner">
        <div class="grid grid--between-xs">
            <div class="grid__col grid__col--xs">
                <div class="object-card__bullet">
                    <svg class="icon  object-card__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-3"></use>
                    </svg>
                </div>
            </div>
            <div class="grid__col grid__col--xs">

                <div class="dropdown js-dropdown object-card__dropdown" data-offset-x="-96" data-offset-y="-48">

                    <button type="button" class="button button--text button--text-color dropdown__trigger button--icon">
                        <span class="button__inner">
                            <svg class="icon  button__icon" focusable="false">
                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
                            </svg>
                            <span class="button__text">Objekti seaded</span>
                        </span>
                    </button>
                    <div class="dropdown__content">
                        <div class="dropdown__content-inner">
                            Objekti seaded
                            <ul class="dropdown__options">
                                <li class="dropdown__option-item">
                                    <a class="dropdown__option-link" href="#">
                                        <svg class="icon  dropdown__option-icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
                                        </svg>
                                        <span class="dropdown__text">Muuda infot</span>
                                    </a>
                                </li>
                                <li class="dropdown__option-item">
                                    <a class="dropdown__option-link" href="#">
                                        <svg class="icon  dropdown__option-icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#archive"></use>
                                        </svg>
                                        <span class="dropdown__text">Arhiveeri</span>
                                    </a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid object-card__grid">
            <div class="grid__col grid__col--xs-2 object-card__col">
                Objekti nimi
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Juhan Liivi
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Objekti kood
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                L-8
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Aadress
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                J. Liivi 8
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Linn
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Tartu
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Postiindeks
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                50106
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Seotud lepingud
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                <a href="#">22000044</a><br><a href="#">22000042</a><br><a href="#">22000032</a>
            </div>
        </div>
    </div>
</div>


        {% set BEM -%}
    object-card object-card--color-{{ 1 + random(5) }}
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isArchived %} is-archived{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <div class="object-card__inner">
        <div class="grid grid--between-xs">
            <div class="grid__col grid__col--xs">
                <div class="object-card__bullet">
                    {% include '@icon' with { name: 'house-' ~ (1 + random(4)), modifier: '', class: 'object-card__icon' } %}
                </div>
            </div>
            <div class="grid__col grid__col--xs">
                {% include '@dropdown' with { class: 'object-card__dropdown', modifier: '', data: data.dropdown, offsetX: -96, offsetY: -48 } %}
            </div>
        </div>
        {% if data.items %}
            <div class="grid object-card__grid">
                {% for item in data.items %}
                    <div class="grid__col grid__col--xs-2 object-card__col">
                        {{ item.key }}
                    </div>
                    <div class="grid__col grid__col--xs-2 object-card__col">
                        {{ item.value }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "data": {
    "dropdown": {
      "buttonModifier": "button--text button--text-color",
      "trigger": {
        "text": "Objekti seaded",
        "icon": "dots",
        "iconPosition": null
      },
      "triggerIconAnimated": false,
      "content": "Objekti seaded",
      "options": [
        {
          "url": "#",
          "icon": "edit",
          "text": "Muuda infot"
        },
        {
          "url": "#",
          "icon": "archive",
          "text": "Arhiveeri"
        }
      ]
    },
    "items": [
      {
        "key": "Objekti nimi",
        "value": "Juhan Liivi"
      },
      {
        "key": "Objekti kood",
        "value": "L-8"
      },
      {
        "key": "Aadress",
        "value": "J. Liivi 8"
      },
      {
        "key": "Linn",
        "value": "Tartu"
      },
      {
        "key": "Postiindeks",
        "value": "50106"
      },
      {
        "key": "Seotud lepingud",
        "value": "<a href=\"#\">22000044</a><br><a href=\"#\">22000042</a><br><a href=\"#\">22000032</a>"
      }
    ]
  }
}

File:

Content:


                                .object-card {
    display: block;
    flex: 1 1;
    width: 100%;
    height: 100%;

    @include bp(sm-min) {
        padding-bottom: 8px;
    }
}

.object-card__inner {
    height: 100%;
    padding: 16px;
    background: $L-background;
    border-radius: $border-radius-base;
}

.object-card__grid {
    margin-top: 16px;
    margin-bottom: -8px;
}

.object-card__col {
    margin-bottom: 8px;
}

.object-card__bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: $border-radius-round;

    @include bp(lg-min) {
        width: 64px;
        height: 64px;
    }

    .object-card--color-1 & {
        background: $L-object-card-bg-1;
        color: $L-object-card-icon-1;
    }

    .object-card--color-2 & {
        background: $L-object-card-bg-2;
        color: $L-object-card-icon-2;
    }

    .object-card--color-3 & {
        background: $L-object-card-bg-3;
        color: $L-object-card-icon-3;
    }

    .object-card--color-4 & {
        background: $L-object-card-bg-4;
        color: $L-object-card-icon-4;
    }

    .object-card--color-5 & {
        background: $L-object-card-bg-5;
        color: $L-object-card-icon-5;
    }

    .object-card--color-6 & {
        background: $L-object-card-bg-6;
        color: $L-object-card-icon-6;
    }

    .object-card.is-archived & {
        background: $L-object-card-bg-archived;
        color: $L-object-card-icon-archived;
    }
}

.object-card__icon {
    flex: 0 0 24px;
    font-size: 24px;
}

URL: /components/raw/object-card/object-card.scss
Filesystem Path: src/patterns/components/object-card/object-card.scss
Size: 1.5 KB

Content:
import './object-card.scss';
URL: /components/raw/object-card/object-card.ts
Filesystem Path: src/patterns/components/object-card/object-card.ts
Size: 29 Bytes

Handle: @object-card--default
Filesystem Path: src/patterns/components/object-card/object-card.twig
References (2): @icon, @dropdown
Referenced by (1): @view-objects


        
        
        <div class="object-card object-card--color-3 is-archived">
    <div class="object-card__inner">
        <div class="grid grid--between-xs">
            <div class="grid__col grid__col--xs">
                <div class="object-card__bullet">
                    <svg class="icon  object-card__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-4"></use>
                    </svg>
                </div>
            </div>
            <div class="grid__col grid__col--xs">

                <div class="dropdown js-dropdown object-card__dropdown" data-offset-x="-96" data-offset-y="-48">

                    <button type="button" class="button button--text button--text-color dropdown__trigger button--icon">
                        <span class="button__inner">
                            <svg class="icon  button__icon" focusable="false">
                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
                            </svg>
                            <span class="button__text">Objekti seaded</span>
                        </span>
                    </button>
                    <div class="dropdown__content">
                        <div class="dropdown__content-inner">
                            Objekti seaded
                            <ul class="dropdown__options">
                                <li class="dropdown__option-item">
                                    <a class="dropdown__option-link" href="#">
                                        <svg class="icon  dropdown__option-icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
                                        </svg>
                                        <span class="dropdown__text">Muuda infot</span>
                                    </a>
                                </li>
                                <li class="dropdown__option-item">
                                    <a class="dropdown__option-link" href="#">
                                        <svg class="icon  dropdown__option-icon" focusable="false">
                                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#archive"></use>
                                        </svg>
                                        <span class="dropdown__text">Arhiveeri</span>
                                    </a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid object-card__grid">
            <div class="grid__col grid__col--xs-2 object-card__col">
                Objekti nimi
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Juhan Liivi
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Objekti kood
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                L-8
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Aadress
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                J. Liivi 8
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Linn
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Tartu
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Postiindeks
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                50106
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                Seotud lepingud
            </div>
            <div class="grid__col grid__col--xs-2 object-card__col">
                <a href="#">22000044</a><br><a href="#">22000042</a><br><a href="#">22000032</a>
            </div>
        </div>
    </div>
</div>


        {% set BEM -%}
    object-card object-card--color-{{ 1 + random(5) }}
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isArchived %} is-archived{% endif %}
{%- endset %}

<div class="{{ BEM }}">
    <div class="object-card__inner">
        <div class="grid grid--between-xs">
            <div class="grid__col grid__col--xs">
                <div class="object-card__bullet">
                    {% include '@icon' with { name: 'house-' ~ (1 + random(4)), modifier: '', class: 'object-card__icon' } %}
                </div>
            </div>
            <div class="grid__col grid__col--xs">
                {% include '@dropdown' with { class: 'object-card__dropdown', modifier: '', data: data.dropdown, offsetX: -96, offsetY: -48 } %}
            </div>
        </div>
        {% if data.items %}
            <div class="grid object-card__grid">
                {% for item in data.items %}
                    <div class="grid__col grid__col--xs-2 object-card__col">
                        {{ item.key }}
                    </div>
                    <div class="grid__col grid__col--xs-2 object-card__col">
                        {{ item.value }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "data": {
    "dropdown": {
      "buttonModifier": "button--text button--text-color",
      "trigger": {
        "text": "Objekti seaded",
        "icon": "dots",
        "iconPosition": null
      },
      "triggerIconAnimated": false,
      "content": "Objekti seaded",
      "options": [
        {
          "url": "#",
          "icon": "edit",
          "text": "Muuda infot"
        },
        {
          "url": "#",
          "icon": "archive",
          "text": "Arhiveeri"
        }
      ]
    },
    "items": [
      {
        "key": "Objekti nimi",
        "value": "Juhan Liivi"
      },
      {
        "key": "Objekti kood",
        "value": "L-8"
      },
      {
        "key": "Aadress",
        "value": "J. Liivi 8"
      },
      {
        "key": "Linn",
        "value": "Tartu"
      },
      {
        "key": "Postiindeks",
        "value": "50106"
      },
      {
        "key": "Seotud lepingud",
        "value": "<a href=\"#\">22000044</a><br><a href=\"#\">22000042</a><br><a href=\"#\">22000032</a>"
      }
    ],
    "isArchived": true
  }
}

File:

Content:


                                .object-card {
    display: block;
    flex: 1 1;
    width: 100%;
    height: 100%;

    @include bp(sm-min) {
        padding-bottom: 8px;
    }
}

.object-card__inner {
    height: 100%;
    padding: 16px;
    background: $L-background;
    border-radius: $border-radius-base;
}

.object-card__grid {
    margin-top: 16px;
    margin-bottom: -8px;
}

.object-card__col {
    margin-bottom: 8px;
}

.object-card__bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: $border-radius-round;

    @include bp(lg-min) {
        width: 64px;
        height: 64px;
    }

    .object-card--color-1 & {
        background: $L-object-card-bg-1;
        color: $L-object-card-icon-1;
    }

    .object-card--color-2 & {
        background: $L-object-card-bg-2;
        color: $L-object-card-icon-2;
    }

    .object-card--color-3 & {
        background: $L-object-card-bg-3;
        color: $L-object-card-icon-3;
    }

    .object-card--color-4 & {
        background: $L-object-card-bg-4;
        color: $L-object-card-icon-4;
    }

    .object-card--color-5 & {
        background: $L-object-card-bg-5;
        color: $L-object-card-icon-5;
    }

    .object-card--color-6 & {
        background: $L-object-card-bg-6;
        color: $L-object-card-icon-6;
    }

    .object-card.is-archived & {
        background: $L-object-card-bg-archived;
        color: $L-object-card-icon-archived;
    }
}

.object-card__icon {
    flex: 0 0 24px;
    font-size: 24px;
}

URL: /components/raw/object-card/object-card.scss
Filesystem Path: src/patterns/components/object-card/object-card.scss
Size: 1.5 KB

Content:
import './object-card.scss';
URL: /components/raw/object-card/object-card.ts
Filesystem Path: src/patterns/components/object-card/object-card.ts
Size: 29 Bytes

Handle: @object-card--archived
Filesystem Path: src/patterns/components/object-card/object-card.twig
References (2): @icon, @dropdown

Object Card

Archived

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Object Card

Archived