600 West

Logogrid 

<div id="" class="LogoGrid " style="">
    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 1" style="" src="//placehold.it/100x100?text&#x3D;1" />

    </div>

    <div class="LogoGrid-item LogoGrid-item--featured" style="">

        <img id="" class="image  " alt="Logo 2" style="" src="//placehold.it/200x200?text&#x3D;2" />

    </div>

    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 3" style="" src="//placehold.it/100x100?text&#x3D;3" />

    </div>

    <div class="LogoGrid-item LogoGrid-item--featured" style="">

        <img id="" class="image  " alt="Logo 4" style="" src="//placehold.it/200x200?text&#x3D;4" />

    </div>

    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 5" style="" src="//placehold.it/100x100?text&#x3D;5" />

    </div>

    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 6" style="" src="//placehold.it/100x100?text&#x3D;6" />

    </div>

    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 7" style="" src="//placehold.it/100x100?text&#x3D;7" />

    </div>

    <div class="LogoGrid-item " style="">

        <img id="" class="image  " alt="Logo 8" style="" src="//placehold.it/100x100?text&#x3D;8" />

    </div>

</div>
 
<div id="{{id}}" class="LogoGrid {{modifier}}" style="{{style}}">
	{{> @children}}
</div>
 
{
  "style": null,
  "children": [
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=1",
              "alt": "Logo 1"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": "LogoGrid-item--featured",
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/200x200?text=2",
              "alt": "Logo 2"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=3",
              "alt": "Logo 3"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": "LogoGrid-item--featured",
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/200x200?text=4",
              "alt": "Logo 4"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=5",
              "alt": "Logo 5"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=6",
              "alt": "Logo 6"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=7",
              "alt": "Logo 7"
            }
          }
        ]
      }
    },
    {
      "component": "logogrid-item",
      "context": {
        "modifier": null,
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//placehold.it/100x100?text=8",
              "alt": "Logo 8"
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    .LogoGrid {
    display: flex;
    padding: Space(300);
    flex-wrap: wrap;
    justify-content: center;
}
.LogoGrid-item {
    display: flex;
    min-width: 200px;
    padding: Space(500) Space(400);
    margin: Space(300);
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    background: theme-color(background);
}
.LogoGrid-item--featured {
    flex: 0 2 auto;
}
@supports (display: grid) and (clip-path: inset(0 0)) {
    .LogoGrid {
        display: grid;
        padding: Space(400);
        grid-gap: Space(300);
        grid-auto-flow: row dense;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 1fr;
        @media screen and (min-width: 600px) {
            grid-template-columns: repeat(7, 1fr);
            grid-gap: Space(350);
        }
        @media screen and (min-width: 960px) {
            grid-template-columns: repeat(12, 1fr);
            grid-gap: Space(400);
        }
    }
    .LogoGrid-item {
        min-width: 0;
        grid-column: span 2;
    }
    .LogoGrid-item--featured {
        grid-row: span 2;
        grid-column: span 3;
    }
}
  • URL: /components/raw/logogrid/LogoGrid.scss
  • Filesystem Path: components/molecules/LogoGrid/LogoGrid.scss
  • Size: 1.1 KB

Used to display a set of logos within a 5-column modified grid with larger “featured” logos. Intended to be used with LogoGrid-items as children.