Gov Design System CE - Templates

Table of contents: Mobile 

<gov-accordion size="m" class="gov-mobile-only gov-table-of-contents--accordion">
    <gov-accordion-item>
        <h3 id="a1" slot="label">Obsah článku</h3>
        <ul class='gov-table-of-contents gov-list--plain'>
            <li><a href='#nadpis0'>Article Heading H2</a></li>
            <li><a href='#nadpis1'>Article Heading H2</a></li>
            <li><a href='#nadpis2'>Article Heading H2</a></li>
            <li><a href='#nadpis3'>Article Heading H2</a></li>
            <li><a href='#nadpis4'>Article Heading H2</a></li>
        </ul>
    </gov-accordion-item>
</gov-accordion>
 
<gov-accordion size="{{ size }}" class="gov-mobile-only gov-table-of-contents--accordion{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
    <gov-accordion-item {{ state }}>
        {{ render '@heading' heading-mobile }}
        <ul class='gov-table-of-contents gov-list--plain'>
        {{#each list as |aList aIndex|}}
            <li><a href='#nadpis{{aIndex}}'>{{ aList.name }}</a></li>
        {{/each}}
        </ul>
    </gov-accordion-item>
</gov-accordion>
 
{
  "size": "m",
  "aria-label": "Obsah stránky",
  "heading": {
    "tag": "h3",
    "name": "Obsah článku",
    "id": "a1"
  },
  "heading-mobile": {
    "slot": "label",
    "tag": "h3",
    "name": "Obsah článku",
    "id": "a1"
  },
  "list": [
    {
      "name": "Article Heading H2"
    },
    {
      "name": "Article Heading H2",
      "list": [
        {
          "name": "Article Heading H3",
          "list": [
            {
              "name": "Article Heading H4"
            }
          ]
        },
        {
          "name": "Article Heading H3"
        }
      ]
    },
    {
      "name": "Article Heading H2"
    },
    {
      "name": "Article Heading H2",
      "list": [
        {
          "name": "Article Heading H3"
        },
        {
          "name": "Article Heading H3"
        }
      ]
    },
    {
      "name": "Article Heading H2"
    }
  ]
}
  • Content: 
    .gov-table-of-contents {
    ul {
        padding-left: var(--spacing-m);
        margin: 0;
        li {
            margin: 0;
            &:before {
                content: none;
            }
        }
    }
    > li {
        margin-bottom: var(--spacing-xs-nudge);
        &:last-child {
            margin-bottom: 0;
        }
    }
    li a {
        display: inline-block;
        padding-top: var(--spacing-s);
        padding-bottom: var(--spacing-s);
    }
    &--accordion {
        margin-bottom: var(--spacing-l);
        summary,
        .gov-accordion-item__content {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}
  • URL: /components/raw/table-of-contents/table-of-contents.scss
  • Filesystem Path: src/components/atoms/table-of-contents/table-of-contents.scss
  • Size: 686 Bytes

No notes defined.