Regione Toscana Design System

Widget Nav 

<nav class="rtds-widget-nav" aria-label="Sezioni atti">
    <ul class="rtds-widget-nav__list">
        <li>
            <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
 is-active" id="widget-nav-tab-1">

                <span class="rtds-tab__label">Dalla giunta</span>

            </a>
        </li>
        <li>
            <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">

                <span class="rtds-tab__label">Dal Presidente</span>

            </a>
        </li>
        <li>
            <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">

                <span class="rtds-tab__label">dai Dirigenti</span>

            </a>
        </li>
        <li>
            <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">

                <span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>

            </a>
        </li>
    </ul>
</nav>
 
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
  <ul class="rtds-widget-nav__list">
    <li>
      {% render '@tab--borderless', { href: '#', label: 'Dalla giunta', id:
      'widget-nav-tab-1', isActive: true },
      true %}
    </li>
    <li>
      {% render '@tab--borderless', { href: '#', label: 'Dal Presidente', id:
      'widget-nav-tab-2' }, true %}
    </li>
    <li>
      {% render '@tab--borderless', { href: '#', label: 'dai Dirigenti', id:
      'widget-nav-tab-3' }, true %}
    </li>
    <li>
      {% render '@tab--borderless', { href: '#', label: 'di Protezione Civile (dal 20/01/22)', id:
      'widget-nav-tab-3' }, true %}
    </li>
  </ul>
</nav>
 
/* No context defined. */
  • Content: 
    /**
 * WIDGET NAV
 *
*/
@layer components {

    .rtds-widget-nav,
    .rtds-widget-nav__list {
        @apply lg:rtds-flex lg:rtds-justify-center;
    }

    .rtds-widget-nav__list {
        @apply rtds-background-03 rtds-gap-2;
    }

}
  • URL: /components/raw/widget-nav/widget-nav.css
  • Filesystem Path: components/07-widgets/widget-components/widget-nav/widget-nav.css
  • Size: 239 Bytes

No notes defined.