360Giving Design System - Components

Logos 

<div id="logos" class="wrapper">
    <section id="main_logo">

        <img src="assets/images/360-logos/main/360giving-logo.svg" alt="">
        <div>
            <a class="button" href="https://docs.google.com/document/d/1loMbnGxp55srntK_kNJ4uJkuHja_OM9kKhhP6bCIMU4/edit#heading=h.rrgrsd7d40zx">Full Branding Guidelines Document</a>
        </div>
    </section>

    <section class="wrapper">
        <h2 class="align-center">Here you can download any of our logos</h2>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/main/360giving-logo.svg" alt="Main">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/main/360giving-logo-white.svg" alt="Main">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/main/360giving-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/icon/360giving-icon.svg" alt="Icon">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/icon/360giving-icon-white.svg" alt="Icon">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/icon/360giving-icon-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/challenge/360challenge-color.svg" alt="Challenge">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/challenge/360challenge-white.svg" alt="Challenge">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/challenge/360challenge-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/grantnav/360grantnav-color.svg" alt="GrantNav">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/grantnav/360grantnav-white.svg" alt="GrantNav">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/grantnav/360grantnav-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/insights/360insights-color.svg" alt="Insights">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/insights/360insights-white.svg" alt="Insights">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/insights/360insights-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/map/360map-color.svg" alt="Map">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/map/360map-white.svg" alt="Map">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/map/360map-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/registry/360registry-color.svg" alt="Registry">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/registry/360registry-white.svg" alt="Registry">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/registry/360registry-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/resources/360resources-color.svg" alt="Resources">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/resources/360resources-white.svg" alt="Resources">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/resources/360resources-logo-package.zip" download>Download</a>
            </div>
        </div>

        <div class="base-card base-card--spacious">

            <div class="grid grid--two-columns">
                <div class="grid__1">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/standard/360standard-color.svg" alt="Standard">
                    </div>
                </div>
                <div class="grid__1 negative-logo">
                    <div class="base-card__content">
                        <img src="assets/images/360-logos/standard/360standard-white.svg" alt="Standard">
                    </div>
                </div>
            </div>

            <div>
                <a class="button button--small" href="assets/images/360-logos/standard/360standard-logo-package.zip" download>Download</a>
            </div>
        </div>

    </section>

</div>
 
<div id="logos" class="wrapper">
  <section id="main_logo">
    {% set main_logo = logos.color | first %}
    <img src="assets/images/360-logos/{{main_logo.name | lower }}/{{ main_logo.file_svg }}" alt="{{ i.name }}">
    <div>
      <a class="button" href="https://docs.google.com/document/d/1loMbnGxp55srntK_kNJ4uJkuHja_OM9kKhhP6bCIMU4/edit#heading=h.rrgrsd7d40zx">Full Branding Guidelines Document</a>
    </div>
  </section>

  

  <section class="wrapper">
    <h2 class="align-center">Here you can download any of our logos</h2>
    {% for i in logos.color %}
    <div class="base-card base-card--spacious">
      
      <div class="grid grid--two-columns">
        <div class="grid__1">
          <div class="base-card__content">
            <img src="assets/images/360-logos/{{i.name | lower }}/{{ i.file_svg }}" alt="{{ i.name }}">    
          </div>
        </div>
        <div class="grid__1 negative-logo">
          <div class="base-card__content">
            <img src="assets/images/360-logos/{{i.name | lower }}/{{ i.file_svg_white }}" alt="{{ i.name }}">    
          </div>
        </div>
      </div>
      
      <div>
        <a class="button button--small" href="assets/images/360-logos/{{i.name | lower }}/{{ i.file_zip }}" download>Download</a>
      </div>
    </div>
    {% endfor %}
  </section>

</div>
 
{
  "logos": {
    "color": [
      {
        "name": "Main",
        "file_svg": "360giving-logo.svg",
        "file_svg_white": "360giving-logo-white.svg",
        "file_zip": "360giving-logo-package.zip"
      },
      {
        "name": "Icon",
        "file_svg": "360giving-icon.svg",
        "file_svg_white": "360giving-icon-white.svg",
        "file_zip": "360giving-icon-logo-package.zip"
      },
      {
        "name": "Challenge",
        "file_svg": "360challenge-color.svg",
        "file_svg_white": "360challenge-white.svg",
        "file_zip": "360challenge-logo-package.zip"
      },
      {
        "name": "GrantNav",
        "file_svg": "360grantnav-color.svg",
        "file_svg_white": "360grantnav-white.svg",
        "file_zip": "360grantnav-logo-package.zip"
      },
      {
        "name": "Insights",
        "file_svg": "360insights-color.svg",
        "file_svg_white": "360insights-white.svg",
        "file_zip": "360insights-logo-package.zip"
      },
      {
        "name": "Map",
        "file_svg": "360map-color.svg",
        "file_svg_white": "360map-white.svg",
        "file_zip": "360map-logo-package.zip"
      },
      {
        "name": "Registry",
        "file_svg": "360registry-color.svg",
        "file_svg_white": "360registry-white.svg",
        "file_zip": "360registry-logo-package.zip"
      },
      {
        "name": "Resources",
        "file_svg": "360resources-color.svg",
        "file_svg_white": "360resources-white.svg",
        "file_zip": "360resources-logo-package.zip"
      },
      {
        "name": "Standard",
        "file_svg": "360standard-color.svg",
        "file_svg_white": "360standard-white.svg",
        "file_zip": "360standard-logo-package.zip"
      }
    ]
  }
}
  • Content: 
    // This CSS is for the Fractal Platform only. 
// It has no value for the products themselves. 

#logos {
  padding: 40px 0;

  .wrapper {
    max-width: 700px;
  }

  .base-card {
    &:before { background-color: transparent; }
    img { height: 100px; }
    padding: 0 0 24px 0;
    margin-bottom: 16px;
    &__content {
      padding: 48px;
    }

  }

  .button { margin-top: 24px; }

  .negative-logo {
    background-color: hsla(var(--base-hsl), 1);
  }
}

#main_logo {
  padding: 40px 0 100px;
  text-align: center;

  > img {
    max-width: 400px;
  }
}
  • URL: /components/raw/logos/logos.scss
  • Filesystem Path: src/components/01-tokens/logos/logos.scss
  • Size: 561 Bytes

No notes defined.