Gov Design System CE - Templates

Card 

<gov-card direction="horizontal" href="#">
    <picture slot="img">
        <source srcset="/assets/documents.avif" type="image/avif">
        <source srcset="/assets/documents.webp" type="image/webp">
        <img src="/assets/documents.jpg" alt="" width="800" height="533" />
    </picture>
    <gov-flex gap="s" direction="column">
        <header>
            <gov-flex gap="s" direction="column">
                <h3 class=" gov-card__headline">Nový systém hlášení přestupků na veřejných komunikacích</h3>
                <gov-flex gap="s" align-items="center" responsive="false">
                    <gov-icon type="templates" name="calendar-event" size="m" color="default"></gov-icon>
                    <time datetime="2024-10-31" class="gov-card__note">31. října 2024</time>
                </gov-flex>
            </gov-flex>
        </header>
        <p>Ministerstvo dopravy spouští nový online systém pro rychlejší hlášení a řešení přestupků na silnicích. Systém umožňuje občanům hlásit přestupky jednoduše přes webové rozhraní.</p>
        <footer>
            <ul class="gov-tags gov-list--plain">
                <li>
                    <gov-tag color="secondary" type="subtle" size="xs">
                        <gov-icon type="templates" name="car-front" slot="icon-start"></gov-icon>
                        Doprava
                    </gov-tag>
                </li>
            </ul>
        </footer>
    </gov-flex>

</gov-card>
 
{{#> @card }}
    {{#if image}}
        {{ render '@picture' image }}
    {{/if}}
    <gov-flex gap="s" direction="column">
        <header>
            <gov-flex gap="s" direction="column">
                {{#if tag-top }}
                    {{#if tag }}
                        {{ render '@tags' this }}
                    {{/if}}
                {{/if}}
                {{#if updated}}
                    <time datetime="{{ formatDate updated-date }}" class="gov-card__updated">{{ updated }} {{ updated-date }}</time>
                {{/if}}
                {{#if heading }}
                    {{ render '@heading' heading }}
                {{/if}}
                {{#if release}}
                    <gov-flex gap="s" align-items="center" responsive="false">
                        <gov-icon type="templates" name="calendar-event" size="m" color="default"></gov-icon>
                        <time datetime="{{ formatDate release }}" class="gov-card__note">{{ release }}</time>
                    </gov-flex>
                {{/if}}
                {{#if note}}
                    <span class="gov-card__note">{{ note }}</span>
                {{/if}}
                {{#if company}}
                    {{ render '@icon-list' company }}
                {{/if}}
            </gov-flex>
        </header>
        {{#if text}}
            {{{ text }}}
        {{/if}}
        {{#if contact}}
            {{> @contact }}
        {{/if}}
        {{#if button}}
            {{ render '@button-group' this }}
        {{/if}}
        {{#if tag-bottom }}
            <footer>
                {{#if tag }}
                    {{ render '@tags' this }}
                {{/if}}
            </footer>
        {{/if}}
    </gov-flex>
{{/@card}}
 
{
  "direction": "horizontal",
  "heading": {
    "tag": "h3",
    "name": "Nový systém hlášení přestupků na veřejných komunikacích",
    "classes": [
      "gov-card__headline"
    ]
  },
  "url": "#",
  "release": "31. října 2024",
  "text": "<p>Ministerstvo dopravy spouští nový online systém pro rychlejší hlášení a řešení přestupků na silnicích. Systém umožňuje občanům hlásit přestupky jednoduše přes webové rozhraní.</p>",
  "image": {
    "slot": "img",
    "src": "/assets/documents",
    "width": "800",
    "height": "533"
  },
  "tag-bottom": true,
  "tag": [
    {
      "name": "Doprava",
      "color": "secondary",
      "type": "subtle",
      "size": "xs",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "car-front"
      }
    }
  ]
}

No notes defined.