Gov Design System CE - Templates

Social 

<nav aria-label="Možnosti sdílení článku">
    <ul class="gov-social gov-list--plain">
        <li>
            <gov-button color="neutral" size="s" type="base" aria-label="Sdílet na Facebooku" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet na Facebooku">
                <gov-icon type="templates" name="facebook" slot="icon-start" size="s"></gov-icon>

            </gov-button>
        </li>
        <li>
            <gov-button color="neutral" size="s" type="base" aria-label="Sdílet na síti X" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet na síti X">
                <gov-icon type="templates" name="twitter-x" slot="icon-start" size="s"></gov-icon>

            </gov-button>
        </li>
        <li>
            <gov-button color="neutral" size="s" type="base" aria-label="Sdílet přes E-mail" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet přes E-mail">
                <gov-icon type="templates" name="envelope" slot="icon-start" size="s"></gov-icon>

            </gov-button>
        </li>
        <li>
            <gov-button color="neutral" size="s" type="base" aria-label="Sdílet odkaz" target="_blank" rel="noreferrer nofollow" href="#" title="Sdílet odkaz">
                <gov-icon type="templates" name="link" slot="icon-start" size="s"></gov-icon>

            </gov-button>
        </li>
    </ul>
</nav>
 
<nav{{#if aria-label}} aria-label="{{ aria-label }}"{{/if}}>
    <ul class="gov-social gov-list--plain">
        {{#each social}}
            <li>
                {{ render '@button' this }}
            </li>
        {{/each}}
    </ul>
</nav>
 
{
  "aria-label": "Možnosti sdílení článku",
  "social": [
    {
      "color": "neutral",
      "type": "base",
      "size": "s",
      "title": "Sdílet na Facebooku",
      "aria-label": "Sdílet na Facebooku",
      "href": "#",
      "external": true,
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "facebook",
        "size": "s"
      }
    },
    {
      "color": "neutral",
      "type": "base",
      "size": "s",
      "title": "Sdílet na síti X",
      "aria-label": "Sdílet na síti X",
      "href": "#",
      "external": true,
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "twitter-x",
        "size": "s"
      }
    },
    {
      "color": "neutral",
      "type": "base",
      "size": "s",
      "title": "Sdílet přes E-mail",
      "aria-label": "Sdílet přes E-mail",
      "href": "#",
      "external": true,
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "envelope",
        "size": "s"
      }
    },
    {
      "color": "neutral",
      "type": "base",
      "size": "s",
      "title": "Sdílet odkaz",
      "aria-label": "Sdílet odkaz",
      "href": "#",
      "external": true,
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "link",
        "size": "s"
      }
    }
  ]
}
  • Content: 
    .gov-social {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-s-nudge);
    margin-top: 0 !important;
    padding-left: 0 !important;
}
  • URL: /components/raw/social/social.scss
  • Filesystem Path: src/components/molecules/social/social.scss
  • Size: 154 Bytes

No notes defined.