Gov Design System CE - Templates

Cards with Icon 

<gov-grid gap="l" class="gov-card-grid">
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-card direction="vertical">
            <gov-icon type="templates" name="telephone" slot="icon" size="5xl"></gov-icon>
            <gov-flex gap="s" direction="column">
                <header>
                    <h3 class=" gov-card__headline">Kontaktujte nás</h3>
                </header>
                <p>
                <p>Všechny kontakty naleznete jednoduše na jednom místě.</p>
                </p>
                <gov-button color="primary" size="s" type="link" href="#">
                    Spojte se s námi

                    <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                </gov-button>
            </gov-flex>

        </gov-card>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-card direction="vertical">
            <gov-icon type="templates" name="chat-text" slot="icon" size="5xl"></gov-icon>
            <gov-flex gap="s" direction="column">
                <header>
                    <h3 class=" gov-card__headline">Poraďte se s ostatními</h3>
                </header>
                <p>
                <p>Diskutujte a sdílejte rady s ostatními uživateli našeho diskuzního fora</p>
                </p>
                <gov-button color="primary" size="s" type="link" href="#">
                    Navštívit fórum

                    <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                </gov-button>
            </gov-flex>

        </gov-card>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-card direction="vertical">
            <gov-icon type="templates" name="twitter-x" slot="icon" size="5xl"></gov-icon>
            <gov-flex gap="s" direction="column">
                <header>
                    <h3 class=" gov-card__headline">Sledujte naše socilní sítě</h3>
                </header>
                <p>
                <p>Pro více aktuálních informací v reálném čase sledujte naše sociální sítě</p>
                </p>
                <gov-button color="primary" size="s" type="link" href="#">
                    Prohlédnout novinky

                    <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                </gov-button>
            </gov-flex>

        </gov-card>

    </gov-grid-item>
</gov-grid>
 
<gov-grid gap="l" class="gov-card-grid{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
    {{#each card}}
        <gov-grid-item
            {{#if col-span/default}}col-span="{{ col-span/default }}"{{/if}}
            {{#if col-span/sm}}col-span-sm="{{ col-span/sm }}"{{/if}}
            {{#if col-span/md}}col-span-md="{{ col-span/md }}"{{/if}}
            {{#if col-span/lg}}col-span-lg="{{ col-span/lg }}"{{/if}}
            {{#if col-span/xl}}col-span-xl="{{ col-span/xl }}"{{/if}}
            {{#if row-span/default}}row-span="{{ row-span/default }}"{{/if}}
            {{#if row-span/sm}}row-span-sm="{{ row-span/sm }}"{{/if}}
            {{#if row-span/md}}row-span-md="{{ row-span/md }}"{{/if}}
            {{#if row-span/lg}}row-span-lg="{{ row-span/lg }}"{{/if}}
            {{#if row-span/xl}}row-span-xl="{{ row-span/xl }}"{{/if}}>

            {{> @card-icon this }}

        </gov-grid-item>
    {{/each}}
</gov-grid>
 
{
  "card": [
    {
      "heading": {
        "tag": "h3",
        "name": "Kontaktujte nás",
        "classes": [
          "gov-card__headline"
        ]
      },
      "text": "<p>Všechny kontakty naleznete jednoduše na jednom místě.</p>",
      "button-link": {
        "color": "primary",
        "type": "link",
        "size": "s",
        "href": "#",
        "text": "Spojte se s námi",
        "icon-end": {
          "slot": "icon-end",
          "type": "templates",
          "name": "chevron-right"
        }
      },
      "icon": {
        "slot": "icon",
        "name": "telephone",
        "type": "templates",
        "size": "5xl"
      },
      "direction": "vertical",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "tag": "h3",
        "name": "Poraďte se s ostatními",
        "classes": [
          "gov-card__headline"
        ]
      },
      "text": "<p>Diskutujte a sdílejte rady s ostatními uživateli našeho diskuzního fora</p>",
      "button-link": {
        "color": "primary",
        "type": "link",
        "size": "s",
        "href": "#",
        "text": "Navštívit fórum",
        "icon-end": {
          "slot": "icon-end",
          "type": "templates",
          "name": "chevron-right"
        }
      },
      "icon": {
        "slot": "icon",
        "name": "chat-text",
        "type": "templates",
        "size": "5xl"
      },
      "direction": "vertical",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "tag": "h3",
        "name": "Sledujte naše socilní sítě",
        "classes": [
          "gov-card__headline"
        ]
      },
      "text": "<p>Pro více aktuálních informací v reálném čase sledujte naše sociální sítě</p>",
      "button-link": {
        "color": "primary",
        "type": "link",
        "size": "s",
        "href": "#",
        "text": "Prohlédnout novinky",
        "icon-end": {
          "slot": "icon-end",
          "type": "templates",
          "name": "chevron-right"
        }
      },
      "icon": {
        "slot": "icon",
        "name": "twitter-x",
        "type": "templates",
        "size": "5xl"
      },
      "direction": "vertical",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    }
  ]
}

No notes defined.