Fractal Starter
Project version : 0.1.2

Block Social Icons 

<div class="icons-social">
    <h3>Suivez-nous</h3>
    <div class="icons-social__list">
        <div class="icon-social icon-social--facebook">
            <a href="#" title="Facebook" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
        <div class="icon-social icon-social--youtube">
            <a href="#" title="Youtube" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
        <div class="icon-social icon-social--twitter">
            <a href="#" title="Twitter" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
        <div class="icon-social icon-social--instagram">
            <a href="#" title="Instagram" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
        <div class="icon-social icon-social--linkedin">
            <a href="#" title="LinkedIn" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
        <div class="icon-social icon-social--vimeo">
            <a href="#" title="Vimeo" target="_blank" class="outer-box">
                <div class="inner-box"></div>
            </a>
        </div>
    </div>
</div>
 
<div class="icons-social">
   <h3>{{site.social.title}}</h3>
   <div class="icons-social__list">
      {{#each site.social.icons }}
         {{> @icons-social icon_social=this }}
      {{/each}}
   </div>
</div>
 
{
  "site": {
    "title": "XXL Organisation",
    "current_year": 2019,
    "social": {
      "title": "Suivez-nous",
      "icons": [
        {
          "title": "Facebook",
          "class": "facebook",
          "link": "#"
        },
        {
          "title": "Youtube",
          "class": "youtube",
          "link": "#"
        },
        {
          "title": "Twitter",
          "class": "twitter",
          "link": "#"
        },
        {
          "title": "Instagram",
          "class": "instagram",
          "link": "#"
        },
        {
          "title": "LinkedIn",
          "class": "linkedin",
          "link": "#"
        },
        {
          "title": "Vimeo",
          "class": "vimeo",
          "link": "#"
        }
      ]
    }
  },
  "block_socials": {
    "title": "Suivez-nous",
    "icons": [
      {
        "title": "Facebook",
        "class": "facebook",
        "link": "#"
      },
      {
        "title": "Youtube",
        "class": "youtube",
        "link": "#"
      },
      {
        "title": "Twitter",
        "class": "twitter",
        "link": "#"
      },
      {
        "title": "Instagram",
        "class": "instagram",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    .icons-social {
   &__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0 -.5rem;
      align-items: center;

      @include mediaWQuery($media-query-m) {
         justify-content: flex-start;
      }
   }

   @include mediaWQuery($media-query-m) {
      h3 { margin-bottom: 2.15rem }
   }
}
  • URL: /components/raw/block-social-icons/block-social-icons.scss
  • Filesystem Path: components/06-components/02-blocks/20-block-social-icons/block-social-icons.scss
  • Size: 338 Bytes

There are no notes for this item.