rudern.de Webstyleguide

Header 

<header class="header js--navigation" id="header">
    <div class="header--inner base__centered">

        <p class="header--claim" id="header--title">
            Deutscher Ruderverband e.V.
        </p>

        <div class="header--logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="105" height="43" viewBox="0 0 105 43" aria-labelledby="header--title header--logo-desc" role="img">
                <desc id="header--logo-desc">Logo des Deutschen Ruderverbands</desc>
                <path d="M12.84,1C21.12,1,27,5.71,27,14.05c0,9.87-7.39,13.2-14.16,13.2H1V1ZM11.49,5.72h-4V22.48h4c4.48,0,8.82-1.91,8.82-8.43,0-6.2-4.14-8.34-8.82-8.34M71.68,1,65.16,15.82,58.28,1H51L63.73,27.34h3.06L78.66,1Zm-33,15.64H36.56V27.41H30V1H41.68c6.7,0,8.73,4.28,8.73,7.66,0,3.12-1.53,5-4.39,6.32,2,1.66,2.1,1.66,3.37,4.51L53,27.4H46l-2.36-4.8-2.21-4.4a2.69,2.69,0,0,0-2.77-1.57m1.28-10.9H36.56v6h3.37c2.66,0,3.73-1,3.73-3.11,0-1.52-1.07-2.93-3.73-2.93M103.2.36H105C95.1,21,64.67,51.25,0,40.91L1.5,39.5C68.7,47.78,95.32,14,103.2.36" style="fill: #ffffff" />
            </svg>
        </div>

        <button class="header--navigation-trigger navigation--trigger">
            <span class="navigation--trigger-label"></span>
            <span class="navigation--trigger-deco"></span>
        </button>

        <div class="header--mobile-wrapper navigation--mobile-wrapper">
            <nav class="header--navigation-meta navigation--meta">
                <ul class="menu">
                    <li>
                        <a class="menu--item-link" href="#">
                            News
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link" href="#">
                            Termine
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link" href="#">
                            Mediathek
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link" href="#">
                            Presse
                        </a>
                    </li>
                </ul>
            </nav>

            <nav class="header--navigation-main navigation--main">
                <ul class="menu">
                    <li>
                        <a class="menu--item-link level-1" href="#">
                            Nationalmannschaft
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link level-1" href="#">
                            Wettkampfsport
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link level-1" href="#">
                            Breitensport
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link level-1" href="#">
                            Sportart Rudern
                        </a>
                    </li>
                    <li>
                        <a class="menu--item-link level-1" href="#">
                            Verband
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>
</header>
 
<header class="header js--navigation" id="header">
  <div class="header--inner base__centered">


    <p class="header--claim" id="header--title">
      {{ claim }}
    </p>


    <div class="header--logo">
      <svg xmlns="http://www.w3.org/2000/svg" width="105" height="43" viewBox="0 0 105 43"
        aria-labelledby="header--title header--logo-desc" role="img">
        <desc id="header--logo-desc">Logo des Deutschen Ruderverbands</desc>
        <path
          d="M12.84,1C21.12,1,27,5.71,27,14.05c0,9.87-7.39,13.2-14.16,13.2H1V1ZM11.49,5.72h-4V22.48h4c4.48,0,8.82-1.91,8.82-8.43,0-6.2-4.14-8.34-8.82-8.34M71.68,1,65.16,15.82,58.28,1H51L63.73,27.34h3.06L78.66,1Zm-33,15.64H36.56V27.41H30V1H41.68c6.7,0,8.73,4.28,8.73,7.66,0,3.12-1.53,5-4.39,6.32,2,1.66,2.1,1.66,3.37,4.51L53,27.4H46l-2.36-4.8-2.21-4.4a2.69,2.69,0,0,0-2.77-1.57m1.28-10.9H36.56v6h3.37c2.66,0,3.73-1,3.73-3.11,0-1.52-1.07-2.93-3.73-2.93M103.2.36H105C95.1,21,64.67,51.25,0,40.91L1.5,39.5C68.7,47.78,95.32,14,103.2.36"
          style="fill: #ffffff" />
      </svg>
    </div>


    <button class="header--navigation-trigger navigation--trigger">
      <span class="navigation--trigger-label"></span>
      <span class="navigation--trigger-deco"></span>
    </button>
    
    <div class="header--mobile-wrapper navigation--mobile-wrapper">
      <nav class="header--navigation-meta navigation--meta">
        <ul class="menu">
          {{#each nav_header_items_meta }}
          <li>
            <a class="menu--item-link" href="{{ href }}">
              {{ label }}
            </a>
          </li>
          {{/each}}
        </ul>
      </nav>

      <nav class="header--navigation-main navigation--main">
        <ul class="menu">
          {{#each nav_header_items_main }}
          <li>
            <a class="menu--item-link level-{{ level }}" href="{{ href }}">
              {{ label }}
            </a>
          </li>
          {{/each}}
        </ul>
      </nav>
    </div>


  </div>
</header>
 
{
  "claim": "Deutscher Ruderverband e.V.",
  "nav_header_items_meta": [
    {
      "label": "News",
      "href": "#"
    },
    {
      "label": "Termine",
      "href": "#"
    },
    {
      "label": "Mediathek",
      "href": "#"
    },
    {
      "label": "Presse",
      "href": "#"
    }
  ],
  "nav_header_items_main": [
    {
      "label": "Nationalmannschaft",
      "href": "#",
      "level": "1"
    },
    {
      "label": "Wettkampfsport",
      "href": "#",
      "level": "1"
    },
    {
      "label": "Breitensport",
      "href": "#",
      "level": "1"
    },
    {
      "label": "Sportart Rudern",
      "href": "#",
      "level": "1"
    },
    {
      "label": "Verband",
      "href": "#",
      "level": "1"
    }
  ],
  "nav_footer_items_top": [
    {
      "label": "News",
      "href": "#"
    },
    {
      "label": "Termine",
      "href": "#"
    },
    {
      "label": "Mediathek",
      "href": "#"
    },
    {
      "label": "Presse",
      "href": "#"
    },
    {
      "label": "FAQ",
      "href": "#"
    },
    {
      "label": "Newsletter",
      "href": "#"
    }
  ],
  "nav_footer_items_bottom": [
    {
      "label": "Impressum",
      "href": "#"
    },
    {
      "label": "Rechtliche Hinweise",
      "href": "#"
    },
    {
      "label": "Datenschutz",
      "href": "#"
    },
    {
      "label": "Kontakt",
      "href": "#"
    }
  ],
  "nav_footer_items_social": [
    {
      "icon": "facebook",
      "href": "#"
    },
    {
      "icon": "twitter",
      "href": "#"
    },
    {
      "icon": "instagram",
      "href": "#"
    },
    {
      "icon": "youtube",
      "href": "#"
    }
  ]
}

No notes defined.