Gov Design System CE - Templates

Table of contents 

<h3 id="a1">Obsah článku</h3>
    <nav aria-label="Obsah stránky">
        <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>
                <ul>
                    <li>
                        <a href="#nadpis1-0">Article Heading H3</a>
                        <ul>
                            <li>
                                <a href="#nadpis1-0-0">Article Heading H4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#nadpis1-1">Article Heading H3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#nadpis2">Article Heading H2</a>
            </li>
            <li>
                <a href="#nadpis3">Article Heading H2</a>
                <ul>
                    <li>
                        <a href="#nadpis3-0">Article Heading H3</a>
                    </li>
                    <li>
                        <a href="#nadpis3-1">Article Heading H3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#nadpis4">Article Heading H2</a>
            </li>
        </ul>
    </nav>
 
{{#if heading}}
    {{ render '@heading' heading }}
{{/if}}
<nav{{#if aria-label}} aria-label="{{ aria-label }}"{{/if}}>
    <ul class="gov-table-of-contents gov-list--plain">
        {{#each list as |aList aIndex|}}
        <li>
            <a href="#nadpis{{aIndex}}">{{ aList.name }}</a>
            {{#if aList.list}}
            <ul>
            {{#each aList.list as |bList bIndex|}}
            <li>
                <a href="#nadpis{{aIndex}}-{{bIndex}}">{{ bList.name }}</a>
                {{#if bList.list}}
                <ul>
                    {{#each bList.list as |cList cIndex|}}
                    <li>
                        <a href="#nadpis{{aIndex}}-{{bIndex}}-{{cIndex}}">{{ cList.name }}</a>
                    </li>
                    {{/each}}
                </ul>
                {{/if}}
            </li>
            {{/each}}
            </ul>
            {{/if}}
        </li>
        {{/each}}
    </ul>
</nav>
 
{
  "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.