51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Misc Menu

100% 
<div class="c-misc-menu">
    <ul class="c-misc-menu__list">
        <li class="c-misc-menu__item"><a class="c-misc-menu__link" href="#">Kontakt</a></li>
        <li class="c-misc-menu__item"><a class="c-misc-menu__link" href="#">Impressum</a></li>
        <li class="c-misc-menu__item"><a class="c-misc-menu__link" href="#">Datenschtz</a></li>
        <li class="c-misc-menu__item"><a class="c-misc-menu__link" href="#">AGB</a></li>
    </ul>
</div>
 
<div class="c-misc-menu">
    <ul class="c-misc-menu__list">
        {% for item in items %}
            <li class="c-misc-menu__item"><a class="c-misc-menu__link" href="#">{{ item }}</a></li>
        {% endfor %}
    </ul>
</div>
 
{
  "items": [
    "Kontakt",
    "Impressum",
    "Datenschtz",
    "AGB"
  ]
}
  • Content: 
    .c-misc-menu {
    font-weight: 700;

    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        list-style: none;
        margin: rem-calc(20) auto 0;
        max-width: 100%;
        padding: 0;
        position: relative;
        width: rem-calc(400);

        @include breakpoint(large) {
            justify-content: space-between;
        }
    }

    &__item {
        margin-bottom: rem-calc(20);
    }

    &__link {
        border-bottom: inherit;
        color: inherit;
        padding: rem-calc(10);
        text-decoration: inherit;
        transition: inherit;

        &:active,
        &:focus,
        &:hover {
            color: $color-grey-light;

            @include transition(color);
        }
    }
}
  • URL: /components/raw/misc-menu/misc-menu.scss
  • Filesystem Path: src/patterns/20-components/menus/misc-menu/misc-menu.scss
  • Size: 777 Bytes

There are no notes for this item.