Table of contents

Category name
Category name
Category name

HTML code snippet

<dl class="article-toc">
    <dt data-group="Learn">Category name</dt>
    <dd>
        <ul class="list-ui">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </dd>
    <dt data-group="Start">Category name</dt>
    <dd>
        <ul class="list-ui">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </dd>

    <dt data-group="Implement">Category name</dt>
    <dd>
        <ul class="list-ui">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </dd>
</dl>

The data-group attribute sets the category, which in turn can be used to style by using the [data-group='category name'] CSS hook.