600 West

Logocluster: Space Around 

<div id="" class="LogoCluster LogoCluster--space-around" style="">

    <img id="" class="image  LogoCluster-logo" alt="" style="" src="//media.sproutsocial.com/uploads/logos/press/media-logo-wallstreetjournal-gray.svgz" />

    <img id="" class="image  LogoCluster-logo" alt="" style="" src="//media.sproutsocial.com/uploads/logos/press/media-logo-tnw-gray.svgz" />

    <img id="" class="image  LogoCluster-logo" alt="" style="" src="//media.sproutsocial.com/uploads/logos/press/media-logo-inc-gray.svgz" />

</div>
 
<div id="{{id}}" class="LogoCluster {{modifier}}" style="{{style}}">
    {{> @children}}
</div>
 
{
  "id": null,
  "modifier": "LogoCluster--space-around",
  "style": null,
  "children": [
    {
      "component": "image",
      "context": {
        "modifier": "LogoCluster-logo",
        "svgurl": "//media.sproutsocial.com/uploads/logos/press/media-logo-wallstreetjournal-gray.svgz"
      }
    },
    {
      "component": "image",
      "context": {
        "modifier": "LogoCluster-logo",
        "svgurl": "//media.sproutsocial.com/uploads/logos/press/media-logo-tnw-gray.svgz"
      }
    },
    {
      "component": "image",
      "context": {
        "modifier": "LogoCluster-logo",
        "svgurl": "//media.sproutsocial.com/uploads/logos/press/media-logo-inc-gray.svgz"
      }
    }
  ]
}
  • Content: 
    .LogoCluster {
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    &-logo {
        margin: 20px;
        &._gray {
            // only works for inline SVG elements
            fill: get-color(neutral, 500);
        }
    }
    &--space-around {
        justify-content: space-around;
    }
    &--space-between {
        justify-content: space-between;
    }
    &--tight &-logo {
        margin: Space(300);
    }
    &--light &-logo {
        opacity: .4;
    }
}
  • URL: /components/raw/logocluster/LogoCluster.scss
  • Filesystem Path: components/molecules/LogoCluster/LogoCluster.scss
  • Size: 559 Bytes

There are no notes for this item.