Gov Design System CE - Templates

Page heading 

<header class="gov-page-heading">
    <gov-flex direction="column" gap="l">
        <gov-breadcrumbs aria-hidden="true">
            <ul>
                <li>
                    <a href="#">
                        Domů
                    </a>
                </li>
                <li>
                    <gov-icon type="components" name="chevron-right"></gov-icon>
                    <a href="#">
                        První úroveň
                    </a>
                </li>
                <li>
                    <gov-icon type="components" name="chevron-right"></gov-icon>
                    <a href="#">
                        Druhá úroveň
                    </a>
                </li>
                <li>
                    <gov-icon type="components" name="chevron-right"></gov-icon>
                    <strong>Nadpis článku</strong>
                </li>
            </ul>
        </gov-breadcrumbs>
        <h1>Nadpis stránky</h1>
        <div class="gov-text-content">
            <p class="gov-text--body-xl">Tato stránka poskytuje klíčové informace a zdroje k vybranému tématu. Ať už hledáte pokyny, dokumentaci nebo užitečné nástroje, zde najdete vše potřebné. Zůstaňte v obraze díky aktuálnímu obsahu.</p>
        </div>
    </gov-flex>
</header>
 
<header class="gov-page-heading{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
    <gov-flex direction="column" gap="l">
        {{ render '@breadcrumbs' }}
        {{ render '@heading' heading }}
        {{#if annotation }}
        <div class="gov-text-content">
            <p class="gov-text--body-xl">{{ annotation }}</p>
        </div>
        {{/if}}
    </gov-flex>
</header>
 
{
  "heading": {
    "tag": "h1",
    "name": "Nadpis stránky"
  },
  "annotation": "Tato stránka poskytuje klíčové informace a zdroje k vybranému tématu. Ať už hledáte pokyny, dokumentaci nebo užitečné nástroje, zde najdete vše potřebné. Zůstaňte v obraze díky aktuálnímu obsahu.",
  "info": {
    "classes": [
      "gov-icon-list--small",
      "gov-icon-list--grey"
    ],
    "item": [
      {
        "updated-text": "Aktualizováno",
        "updated": "26.11.2024",
        "icon": {
          "type": "templates",
          "name": "clock-history",
          "aria-label": "Datum publikace",
          "alt": "Datum publikace:"
        }
      },
      {
        "text": "Jan Novotný",
        "icon": {
          "type": "templates",
          "name": "person",
          "aria-label": "Autor článku",
          "alt": "Autor článku:"
        }
      }
    ]
  },
  "tags": {
    "type": "subtle",
    "tag": [
      {
        "name": "Tag",
        "color": "primary",
        "type": "subtle",
        "size": "s",
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "star-fill"
        }
      },
      {
        "name": "Tag",
        "color": "primary",
        "type": "subtle",
        "size": "s",
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "star-fill"
        }
      },
      {
        "name": "Tag",
        "color": "primary",
        "type": "subtle",
        "size": "s",
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "star-fill"
        }
      }
    ]
  },
  "social": true,
  "image": {
    "src": "/assets/old-town-square",
    "alt": "Pohled na Staroměstské náměstí v Praze, Česká republika. Celá scéna je nasvícena slunečním světlem.",
    "width": "1200",
    "height": "800",
    "classes": [
      "gov-responsive-img"
    ]
  }
}
  • Content: 
    @import "../../../styles/mixins";

.gov-page-heading {
    h1 {
        @include typography("headline-xl");
    }
    &__annotation {
        font-weight: 500;
    }
    &__social {
        @include flex();
    }
}
  • URL: /components/raw/page-heading/page-heading.scss
  • Filesystem Path: src/components/molecules/page-heading/page-heading.scss
  • Size: 214 Bytes

No notes defined.