showcar-ui/src/06-components/molecules/menu-tabs/docs/menu-tabs.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<nav>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Default</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--success">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Success</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--info">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Info</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--error">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Error</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
</nav>
<br>
<nav>
    <a href="#" class="sc-menu-tab sc-inline-link sc-menu-tab--active">
        <span class="sc-menu-tab__icon">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Selected</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
</nav>
<br>
<nav>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Without icon</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <p class="sc-menu-tab__text sc-font-m">Title only</p>
    </a>
</nav>