Gov Design System CE - Templates

Cards Section 

<section aria-labelledby="s1">
    <gov-flex direction="column" gap="l">
        <gov-flex direction="column" gap="m">
            <gov-flex gap="s" justify-content="space-between" align-items="center" class="gov-section-heading" responsive="false">
                <h2 id="s1">Kontaktní osoby</h2>
                <gov-flex gap="s">
                </gov-flex>
            </gov-flex>
        </gov-flex>

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

                <article>
                    <gov-card aria-labelledby="osoba1">
                        <picture slot="img">
                            <source srcset="/assets/man.avif" type="image/avif">
                            <source srcset="/assets/man.webp" type="image/webp">
                            <img src="/assets/man.jpg" alt="" width="368" height="245" />
                        </picture>
                        <gov-flex gap="s" direction="column">
                            <header>
                                <gov-flex gap="s" direction="column">
                                    <h3 id="osoba1" class=" gov-card__headline">Ing. Alena Nováková</h3>
                                    <span class="gov-card__note">Vedoucí oddělení komunikace</span>
                                </gov-flex>
                            </header>
                            <h4 class="contact-h4">Kontakty</h4>
                            <ul class="gov-contact-links gov-list--plain">
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="envelope" color="primary" size="m" alt="e-mail:" aria-label="e-mail"></gov-icon>
                                        <a href="mailto:komunikace@urad.cz">komunikace@urad.cz</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="telephone" color="primary" size="m" alt="tel.:" aria-label="telefon"></gov-icon>
                                        <a href="tel:+420987654321">+420 987 654 321</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="globe2" color="primary" size="m" alt="web:" aria-label="url"></gov-icon>
                                        <a href="https://www.urad.cz/komunikace" target="_blank" rel="noreferrer nofollow">www.urad.cz/komunikace</a>
                                    </gov-flex>
                                </li>
                            </ul>
                        </gov-flex>

                    </gov-card>
                </article>

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

                <article>
                    <gov-card aria-labelledby="osoba2">
                        <picture slot="img">
                            <source srcset="/assets/man.avif" type="image/avif">
                            <source srcset="/assets/man.webp" type="image/webp">
                            <img src="/assets/man.jpg" alt="" width="368" height="245" />
                        </picture>
                        <gov-flex gap="s" direction="column">
                            <header>
                                <gov-flex gap="s" direction="column">
                                    <h3 id="osoba2" class=" gov-card__headline">Bc. Petr Malý</h3>
                                    <span class="gov-card__note">Specialista na média</span>
                                </gov-flex>
                            </header>
                            <h4 class="contact-h4">Kontakty</h4>
                            <ul class="gov-contact-links gov-list--plain">
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="envelope" color="primary" size="m" alt="e-mail:" aria-label="e-mail"></gov-icon>
                                        <a href="mailto:komunikace@urad.cz">komunikace@urad.cz</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="telephone" color="primary" size="m" alt="tel.:" aria-label="telefon"></gov-icon>
                                        <a href="tel:+420987654321">+420 987 654 321</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="globe2" color="primary" size="m" alt="web:" aria-label="url"></gov-icon>
                                        <a href="https://www.urad.cz/komunikace" target="_blank" rel="noreferrer nofollow">www.urad.cz/komunikace</a>
                                    </gov-flex>
                                </li>
                            </ul>
                        </gov-flex>

                    </gov-card>
                </article>

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

                <article>
                    <gov-card aria-labelledby="osoba2">
                        <picture slot="img">
                            <source srcset="/assets/man.avif" type="image/avif">
                            <source srcset="/assets/man.webp" type="image/webp">
                            <img src="/assets/man.jpg" alt="" width="368" height="245" />
                        </picture>
                        <gov-flex gap="s" direction="column">
                            <header>
                                <gov-flex gap="s" direction="column">
                                    <h3 id="osoba2" class=" gov-card__headline">Mgr. Eva Horáková</h3>
                                    <span class="gov-card__note">PR manažerka</span>
                                </gov-flex>
                            </header>
                            <h4 class="contact-h4">Kontakty</h4>
                            <ul class="gov-contact-links gov-list--plain">
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="envelope" color="primary" size="m" alt="e-mail:" aria-label="e-mail"></gov-icon>
                                        <a href="mailto:komunikace@urad.cz">komunikace@urad.cz</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="telephone" color="primary" size="m" alt="tel.:" aria-label="telefon"></gov-icon>
                                        <a href="tel:+420987654321">+420 987 654 321</a>
                                    </gov-flex>
                                </li>
                                <li>
                                    <gov-flex gap="s-nudge" align-items="center" responsive="false">
                                        <gov-icon type="templates" name="globe2" color="primary" size="m" alt="web:" aria-label="url"></gov-icon>
                                        <a href="https://www.urad.cz/komunikace" target="_blank" rel="noreferrer nofollow">www.urad.cz/komunikace</a>
                                    </gov-flex>
                                </li>
                            </ul>
                        </gov-flex>

                    </gov-card>
                </article>

            </gov-grid-item>
        </gov-grid>
    </gov-flex>
</section>
 
<section aria-labelledby="{{ heading/id }}"{{#if classes}} class="{{#each classes}} {{ this }}{{/each}}"{{/if}}>
    <gov-flex direction="column" gap="l">
        {{ render '@section-heading' this }}
        {{#if text}}
            <p class="gov-text--body-l gov-mb--s">{{ text }}</p>
        {{/if}}

        {{#if cards}}
            {{ render '@cards' this }}
        {{/if}}
        {{#if cards-carousel}}
            {{ render '@cards-carousel' this }}
        {{/if}}
        {{#if cards-icon}}
            {{ render '@cards-icon' this }}
        {{/if}}
        {{#if cards-job}}
            {{ render '@cards-job' this }}
        {{/if}}
        {{#if cards-plain}}
            {{ render '@cards-plain' this }}
        {{/if}}
    </gov-flex>
</section>
 
{
  "cards": "this",
  "heading": {
    "tag": "h2",
    "name": "Kontaktní osoby",
    "id": "s1"
  },
  "card": [
    {
      "heading": {
        "tag": "h3",
        "name": "Ing. Alena Nováková",
        "id": "osoba1",
        "classes": [
          "gov-card__headline"
        ]
      },
      "note": "Vedoucí oddělení komunikace",
      "text": "<h4 class=\"contact-h4\">Kontakty</h4>",
      "contact": [
        {
          "e-mail": {
            "text": "komunikace@urad.cz"
          },
          "icon": {
            "type": "templates",
            "name": "envelope",
            "aria-label": "e-mail",
            "alt": "e-mail:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "phone": {
            "text": "+420 987 654 321",
            "link": "+420987654321"
          },
          "icon": {
            "type": "templates",
            "name": "telephone",
            "aria-label": "telefon",
            "alt": "tel.:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "web": {
            "text": "www.urad.cz/komunikace",
            "link": "https://www.urad.cz/komunikace"
          },
          "icon": {
            "type": "templates",
            "name": "globe2",
            "aria-label": "url",
            "alt": "web:",
            "size": "m",
            "color": "primary"
          }
        }
      ],
      "image": {
        "slot": "img",
        "src": "/assets/man",
        "width": "368",
        "height": "245"
      },
      "col-span": {
        "default": "12",
        "xl": "4"
      }
    },
    {
      "heading": {
        "tag": "h3",
        "name": "Bc. Petr Malý",
        "id": "osoba2",
        "classes": [
          "gov-card__headline"
        ]
      },
      "note": "Specialista na média",
      "text": "<h4 class=\"contact-h4\">Kontakty</h4>",
      "contact": [
        {
          "e-mail": {
            "text": "komunikace@urad.cz"
          },
          "icon": {
            "type": "templates",
            "name": "envelope",
            "aria-label": "e-mail",
            "alt": "e-mail:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "phone": {
            "text": "+420 987 654 321",
            "link": "+420987654321"
          },
          "icon": {
            "type": "templates",
            "name": "telephone",
            "aria-label": "telefon",
            "alt": "tel.:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "web": {
            "text": "www.urad.cz/komunikace",
            "link": "https://www.urad.cz/komunikace"
          },
          "icon": {
            "type": "templates",
            "name": "globe2",
            "aria-label": "url",
            "alt": "web:",
            "size": "m",
            "color": "primary"
          }
        }
      ],
      "image": {
        "slot": "img",
        "src": "/assets/man",
        "width": "368",
        "height": "245"
      },
      "col-span": {
        "default": "12",
        "xl": "4"
      }
    },
    {
      "heading": {
        "tag": "h3",
        "name": "Mgr. Eva Horáková",
        "id": "osoba2",
        "classes": [
          "gov-card__headline"
        ]
      },
      "note": "PR manažerka",
      "text": "<h4 class=\"contact-h4\">Kontakty</h4>",
      "contact": [
        {
          "e-mail": {
            "text": "komunikace@urad.cz"
          },
          "icon": {
            "type": "templates",
            "name": "envelope",
            "aria-label": "e-mail",
            "alt": "e-mail:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "phone": {
            "text": "+420 987 654 321",
            "link": "+420987654321"
          },
          "icon": {
            "type": "templates",
            "name": "telephone",
            "aria-label": "telefon",
            "alt": "tel.:",
            "size": "m",
            "color": "primary"
          }
        },
        {
          "web": {
            "text": "www.urad.cz/komunikace",
            "link": "https://www.urad.cz/komunikace"
          },
          "icon": {
            "type": "templates",
            "name": "globe2",
            "aria-label": "url",
            "alt": "web:",
            "size": "m",
            "color": "primary"
          }
        }
      ],
      "image": {
        "slot": "img",
        "src": "/assets/man",
        "width": "368",
        "height": "245"
      },
      "col-span": {
        "default": "12",
        "xl": "4"
      }
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

.contact-h4 {
    @include typography("body-l");
    font-weight: 700;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-l);
}
  • URL: /components/raw/cards-section/cards-section.scss
  • Filesystem Path: src/components/organisms/cards-section/cards-section.scss
  • Size: 179 Bytes

No notes defined.