larva modules: table-of-contents
Available Variants
prototypeHeading
table-of-contents README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
table-of-contents Twig The markup file.
<div class="toc // {{ toc_classes }}" >
{% if c_heading %}
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
{% endif %}
<nav class="toc-navigation // {{ toc_navigation_classes }}"
{% if nav_title_id_attr %}
aria-label="{{ nav_title_id_attr }}"
{% endif %}
{% if nav_list_labelledby_attr %}
aria-labelledby="{{ nav_list_labelledby_attr }}"
{% endif %}
>
<ul class="toc-list // {{ toc_list_classes }}">
{% for item in toc_list_items %}
<li class="toc-list-item // {{ toc_list_item_outer_classes }}">
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
</li>
{% endfor %}
</ul>
{% if toc_mobile_list_items %}
<ul class="toc-list-mobile // {{ toc_mobile_list_classes }}">
{% for item in toc_mobile_list_items %}
<li class="toc-list-item // {{ toc_mobile_list_item_outer_classes }}">
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if nav_title_text %}
{% if nav_title_outer_classes %}
<div class="nav__title-outer {{ nav_title_outer_classes }}">
{% endif %}
<h4 id="{{ nav_title_id_attr }}" class="nav__title {{ nav_title_classes }}">{{ nav_title_text }}</h4>
{% if nav_title_outer_classes %}
</div>
{% endif %}
{% endif %}
</nav>
</div>
table-of-contents JSON The data object for this pattern.
{
"toc_classes": "lrv-u-border-a-1 lrv-u-padding-a-1 lrv-u-margin-b-1",
"toc_navigation_classes": "lrv-js-MobileHeightToggle",
"toc_list_classes": "lrv-js-MobileHeightToggle-target lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid lrv-a-cols2@desktop u-grid-row-gap-0 u-grid-gap-1 lrv-u-padding-t-050",
"toc_mobile_list_classes": "lrv-a-hidden@desktop lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid u-grid-row-gap-0 lrv-u-padding-t-050",
"toc_list_item_outer_classes": "lrv-u-line-height-large lrv-u-width-100p",
"toc_mobile_list_item_outer_classes": "lrv-u-line-height-large lrv-u-width-100p",
"toc_navigation_anchor_classes": "lrv-u-display-block lrv-u-whitespace-nowrap lrv-u-overflow-hidden",
"nav_title_text": "View More",
"nav_title_outer_classes": "lrv-a-hidden@desktop a-heading-border lrv-u-text-align-center",
"nav_title_classes": "lrv-js-MobileHeightToggle-trigger lrv-u-background-color-white lrv-u-font-weight-normal lrv-u-padding-a-050 lrv-u-justify-content-center lrv-u-text-transform-capitalize",
"toc_list_items": [
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
}
],
"c_heading": {
"c_heading_classes": "lrv-a-font-primary-l u-font-size-25 lrv-u-padding-b-075 lrv-u-border-b-1",
"c_heading_id_attr": "section-heading",
"c_heading_text": "Heading",
"c_heading_url": "",
"c_heading_link_classes": "",
"c_heading_outer": false,
"c_heading_outer_classes": "",
"c_heading_is_primary_heading": false
},
"toc_mobile_list_items": [
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
},
{
"c_nav_link_classes": "",
"c_nav_link_text": false,
"c_nav_link_screen_reader_text": "Navigation Item",
"c_nav_link_url": "#",
"c_nav_link_aria_current_attr": "page",
"c_nav_link_markup": "Moon Landing on July 21,1968",
"c_nav_link_title_attr": "Moon Landing on July 21,1968"
}
]
}