rudern.de Webstyleguide

Main 

<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>
<main class="base--main base__centered-wide">

    <div class="base--content">
        <div class="base__centered">

            <div class="editor--content">
                <h1>
                    Grid Base
                </h1>
            </div>
            <div class="grid__base">
                <div class="grid--column editor--content" data-cols="8">

                    <div class="grid">
                        <div class="grid--column" data-cols="8">
                            <div class="styleguide--dummybox"></div>
                        </div>
                        <div class="grid--column" data-cols="3">
                            <div class="styleguide--dummybox"></div>
                        </div>
                        <div class="grid--column" data-cols="5">
                            <div class="styleguide--dummybox"></div>
                        </div>
                    </div>
                </div>

                <div class="grid--column" data-colstart="10" data-colend="16">
                    <div class="styleguide--dummybox"></div>
                </div>
            </div>

            <div class="styleguide--spacer-v"></div>

            <div class="editor--content">
                <h1>
                    Grid 11-4
                </h1>
            </div>
            <div class="grid__11-4">
                <div class="grid--column-1 editor--content">
                    <div class="styleguide--dummybox"></div>
                </div>
                <div class="grid--column-2 editor--content">
                    <div class="styleguide--dummybox"></div>
                </div>
            </div>

            <div class="styleguide--spacer-v"></div>

            <div class="editor--content">
                <h1>
                    Grid 3-8-4
                </h1>
            </div>
            <div class="grid__3-8-4">
                <div class="grid--column-1 editor--content">
                    <div class="styleguide--dummybox"></div>
                </div>
                <div class="grid--column-2 editor--content">
                    <div class="styleguide--dummybox"></div>
                </div>
                <div class="grid--column-3 editor--content">
                    <div class="styleguide--dummybox"></div>
                </div>
            </div>

        </div>
    </div>

</main>
<footer class="footer base--footer base__centered-wide">
    <div class="footer--inner base__centered">

        <nav class="footer--top navigation--footer-top">
            <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>
                <li>
                    <a class="menu--item-link" href="#">
                        FAQ
                    </a>
                </li>
                <li>
                    <a class="menu--item-link" href="#">
                        Newsletter
                    </a>
                </li>
            </ul>
        </nav>

        <nav class="footer--bottom navigation--footer-bottom">
            <ul class="menu">
                <li>
                    <a class="menu--item-link" href="#">
                        Impressum
                    </a>
                </li>
                <li>
                    <a class="menu--item-link" href="#">
                        Rechtliche Hinweise
                    </a>
                </li>
                <li>
                    <a class="menu--item-link" href="#">
                        Datenschutz
                    </a>
                </li>
                <li>
                    <a class="menu--item-link" href="#">
                        Kontakt
                    </a>
                </li>
            </ul>
        </nav>

    </div>
</footer>
 
{{> @header }}
<main class="base--main base__centered-wide">

  <div class="base--content">
    <div class="base__centered">
  
      <div class="editor--content">
        <h1>
          Grid Base
        </h1>
      </div>
      <div class="grid__base">
        <div class="grid--column editor--content" data-cols="8">
          
          <div class="grid">
            <div class="grid--column" data-cols="8">
              <div class="styleguide--dummybox"></div>
            </div>
            <div class="grid--column" data-cols="3">
              <div class="styleguide--dummybox"></div>
            </div>
            <div class="grid--column" data-cols="5">
              <div class="styleguide--dummybox"></div>
            </div>
          </div>
        </div>

        <div class="grid--column" data-colstart="10" data-colend="16">
          <div class="styleguide--dummybox"></div>
        </div>
      </div>
  
      <div class="styleguide--spacer-v"></div>
  
      <div class="editor--content">
        <h1>
          Grid 11-4
        </h1>
      </div>
      <div class="grid__11-4">
        <div class="grid--column-1 editor--content">
          <div class="styleguide--dummybox"></div>
        </div>
        <div class="grid--column-2 editor--content">
          <div class="styleguide--dummybox"></div>
        </div>
      </div>

      <div class="styleguide--spacer-v"></div>
  
      <div class="editor--content">
        <h1>
          Grid 3-8-4
        </h1>
      </div>
      <div class="grid__3-8-4">
        <div class="grid--column-1 editor--content">
          <div class="styleguide--dummybox"></div>
        </div>
        <div class="grid--column-2 editor--content">
          <div class="styleguide--dummybox"></div>
        </div>
        <div class="grid--column-3 editor--content">
          <div class="styleguide--dummybox"></div>
        </div>
      </div>


    </div>
  </div>

</main>
{{> @footer }}
 
{
  "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": "#"
    }
  ],
  "h1": "Headline H1",
  "dummyText": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

No notes defined.