360Giving Design System - Components

Layout Template: Slim 

<div class="layout layout--single-column">
    <div class="nav-bar nav-bar--minimal">
        <a class="nav-bar__home-button" href="/">
            <img src="assets/images/360-logos//" alt="">
            <span class="nav-bar__product-name"></span>
        </a>

        <nav class="nav-bar__nav-menu">
            <ul>
                <li class="nav-menu__item">

                </li>
            </ul>
        </nav>
    </div>

    <hr class="separator-light">

    <main>

        <div class="layout__content-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate, autem architecto consequuntur qui suscipit harum voluptas quis dolor, hic, amet culpa praesentium adipisci vel aperiam dolores! Deleniti impedit sunt vel iusto dolores ab, repellendus at laborum tenetur labore neque corporis, illum dolorem aliquam ipsa inventore reprehenderit! Neque, assumenda minus deleniti, officiis adipisci repellat totam aliquam eveniet facere facilis ab in asperiores ad labore accusantium, at sit culpa modi soluta, necessitatibus a aliquid voluptates. Libero deleniti perferendis illo officiis hic voluptatem minus, ipsam provident distinctio perspiciatis. Quasi recusandae iusto libero, beatae dolore! Nemo totam enim dicta sunt amet tempore, debitis optio quas. Saepe facilis hic sit corrupti. A beatae omnis nulla nihil doloribus temporibus molestias aspernatur, nisi tempore praesentium ut reprehenderit vel quis totam, tenetur dolor repudiandae atque molestiae assumenda maxime possimus necessitatibus odio ullam. Harum architecto placeat ullam, magnam, nostrum tempore dolorum nobis tenetur velit, laudantium libero! Vero dolore, voluptatum, atque dolor voluptas dignissimos alias perferendis veritatis. Eveniet dignissimos odit, eius excepturi iure, iste soluta nobis facere fugit quasi suscipit voluptas delectus id laboriosam quibusdam omnis similique, consequuntur officia?</p>
        </div>

    </main>

    <footer class="layout__footer">

        <footer class="footer footer--compact">

            <div class="footer__row wrapper footer__small-print">
                <div class="footer__column-1">
                    <div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
                </div>

                <div class="footer__column-2 footer__policy-links">
                    <p>
                        <strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
                        <br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
                    </p>
                </div>
            </div>

            <div class="footer__row wrapper footer__small-print">

                <div class="footer__column-2">
                    <p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
                </div>
                <div class="footer__column-2 footer__policy-links hide-print">
                    <p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
                </div>
            </div>
        </footer>

    </footer>
</div>
 
<div class="layout layout--single-column">
  {% render '@nav-bar--minimal', {
    product_logo_alt: product_logo_alt,
    product_logo_svg: product_logo_svg,
    product_name: product_name,
    auxiliary_name: auxiliary_name,
    product_summary: product_summary
  } %}

  <main>
    {% block main_content %}
      <div class="layout__content-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate, autem architecto consequuntur qui suscipit harum voluptas quis dolor, hic, amet culpa praesentium adipisci vel aperiam dolores! Deleniti impedit sunt vel iusto dolores ab, repellendus at laborum tenetur labore neque corporis, illum dolorem aliquam ipsa inventore reprehenderit! Neque, assumenda minus deleniti, officiis adipisci repellat totam aliquam eveniet facere facilis ab in asperiores ad labore accusantium, at sit culpa modi soluta, necessitatibus a aliquid voluptates. Libero deleniti perferendis illo officiis hic voluptatem minus, ipsam provident distinctio perspiciatis. Quasi recusandae iusto libero, beatae dolore! Nemo totam enim dicta sunt amet tempore, debitis optio quas. Saepe facilis hic sit corrupti. A beatae omnis nulla nihil doloribus temporibus molestias aspernatur, nisi tempore praesentium ut reprehenderit vel quis totam, tenetur dolor repudiandae atque molestiae assumenda maxime possimus necessitatibus odio ullam. Harum architecto placeat ullam, magnam, nostrum tempore dolorum nobis tenetur velit, laudantium libero! Vero dolore, voluptatum, atque dolor voluptas dignissimos alias perferendis veritatis. Eveniet dignissimos odit, eius excepturi iure, iste soluta nobis facere fugit quasi suscipit voluptas delectus id laboriosam quibusdam omnis similique, consequuntur officia?</p>
      </div>
    {% endblock %}
  </main>

  <footer class="layout__footer">
    {% block footer %}
      {% render '@footer-section--compact' %}
    {% endblock %}
  </footer>
</div>
 
{
  "layout": {
    "hero": false,
    "modifier": false,
    "columns": "single-column"
  }
}

Layout Component

This is just a structural component, and it should be invisible.

It offers two main options shown as variants.

layout--single-column Single column layout, with a max-width of 960px, and centered content.

layout--narrow this is a variant for layout--single-column where the max-width is set to 700px;

layout--two-columns this variant features a sidebar on the left.

This is the high-level page layouts. Right now, it has two options. This pattern is implemented using css grid layout. We consider that all pages will have the three or four main layout pieces: Header, Main Content, Footer and maybe a sidebar. With CSS Grid Layout, we make sure that both Header and footer will take up the necessary space, while the Main Content section will expand to fill in the extra space. The Footer should always be aligned to the bottom edge of the viewport.