Gov Design System CE - Templates

Text s ikonou vlevo 

<ul class="gov-icon-list gov-list--plain gov-icon-list--info">
    <li>
        <gov-flex align-items="center" gap="s" responsive="false">
            <gov-icon type="templates" name="clock-history" alt="Datum publikace:" aria-label="Datum publikace"></gov-icon>
            <time datetime="2024-11-26">Aktualizováno 26.11.2024</time>
        </gov-flex>
    </li>
    <li>
        <gov-flex align-items="center" gap="s" responsive="false">
            <gov-icon type="templates" name="buildings" alt="Společnost:" aria-label="Společnost"></gov-icon>
            <span>CENIA</span>
        </gov-flex>
    </li>
    <li>
        <gov-flex align-items="center" gap="s" responsive="false">
            <gov-icon type="templates" name="geo-alt" alt="Místo výkonu práce:" aria-label="Místo výkonu práce"></gov-icon>
            <span>Břeclav</span>
        </gov-flex>
    </li>
</ul>
 
<ul class="gov-icon-list gov-list--plain{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
    {{#each item}}
        <li>
            <gov-flex align-items="center" gap="s" responsive="false">
                {{ render '@icon' icon }}
                {{#if updated}}
                    <time datetime="{{ formatDate updated }}">{{ updated-text }} {{ updated }}</time>
                {{else}}
                    <span>{{ text }}</span>
                {{/if}}
            </gov-flex>
        </li>
    {{/each}}
</ul>
 
{
  "classes": [
    "gov-icon-list--info"
  ],
  "item": [
    {
      "updated-text": "Aktualizováno",
      "updated": "26.11.2024",
      "icon": {
        "type": "templates",
        "name": "clock-history",
        "aria-label": "Datum publikace",
        "alt": "Datum publikace:"
      }
    },
    {
      "text": "CENIA",
      "icon": {
        "type": "templates",
        "name": "buildings",
        "aria-label": "Společnost",
        "alt": "Společnost:"
      }
    },
    {
      "text": "Břeclav",
      "icon": {
        "type": "templates",
        "name": "geo-alt",
        "aria-label": "Místo výkonu práce",
        "alt": "Místo výkonu práce:"
      }
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

.gov-icon-list {
    @include flex($direction: column, $gap: var(--spacing-m));

    &--small {
        @include flex($direction: column, $gap: var(--spacing-s));
        li {
            @include typography("body-s");
        }
    }

    &--horizontal {
        @include flex($direction: row, $gap: var(--spacing-m-nudge));
    }

    &--grey {
        li {
            color: var(--text-secondary);
        }
    }
}
  • URL: /components/raw/icon-list/icon-list.scss
  • Filesystem Path: src/components/atoms/icon-list/icon-list.scss
  • Size: 454 Bytes

No notes defined.