Gov Design System CE - Templates

Page heading 

<gov-flex direction="column" gap="m">
    <gov-flex gap="s" justify-content="space-between" align-items="center" class="gov-section-heading" responsive="false">
        <h2>Nadpis sekce</h2>
        <gov-flex gap="s">
            <gov-button color="primary" size="s" type="base" aria-label="Zobrazit všechny články">
                Zobrazit vše

            </gov-button>
            <gov-button color="primary" size="s" type="solid" aria-label="Posunout články směrem na začátek" class=" gov-section-heading__arrow" disabled="true">
                <gov-icon type="templates" name="chevron-left" slot="icon-start"></gov-icon>

            </gov-button>
            <gov-button color="primary" size="s" type="solid" aria-label="Posunout články směrem na konec" class=" gov-section-heading__arrow">
                <gov-icon type="templates" name="chevron-right" slot="icon-start"></gov-icon>

            </gov-button>
        </gov-flex>
    </gov-flex>
</gov-flex>
 
<gov-flex direction="column" gap="m">
    <gov-flex gap="s" justify-content="space-between" align-items="center" class="gov-section-heading" responsive="false">
        {{ render '@heading' heading }}
        <gov-flex gap="s">
            {{#each button}}
                {{ render '@button' this }}
            {{/each}}
        </gov-flex>
    </gov-flex>
    {{#if annotation }}
        <div class="gov-text-content gov-mb--m">
            <p{{#if paragraph}} class="gov-text--body-{{ paragraph }}"{{/if}}>{{ annotation }}</p>
        </div>
    {{/if}}
</gov-flex>
 
{
  "heading": {
    "tag": "h2",
    "name": "Nadpis sekce"
  },
  "button": [
    {
      "text": "Zobrazit vše",
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Zobrazit všechny články"
    },
    {
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Posunout články směrem na začátek",
      "disabled": true,
      "classes": [
        "gov-section-heading__arrow"
      ],
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "chevron-left"
      }
    },
    {
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Posunout články směrem na konec",
      "classes": [
        "gov-section-heading__arrow"
      ],
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "chevron-right"
      }
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

.gov-section-heading {
    h2 {
        @include typography("headline-l");
        color: var(--text-primary);
    }

    @include mq($until: md) {
        &__arrow {
            display: none;
        }
    }
}
  • URL: /components/raw/section-heading/section-heading.scss
  • Filesystem Path: src/components/molecules/section-heading/section-heading.scss
  • Size: 246 Bytes

No notes defined.