University of Staffordshire Pattern Library

IconBox: Social Media

No notes defined.

<div class="grid  grid-3-cols">
    <div>
        <a class="iconBox  iconBox--tiktok" href="">
            <div class="iconBox__icon">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 571.7 666.6" style="enable-background:new 0 0 571.7 666.6;" xml:space="preserve">
                    <path d="M416.1,0c11,94.6,63.8,151,155.6,157v106.4c-53.2,5.2-99.8-12.2-154-45v199  c0,252.8-275.6,331.8-386.4,150.6C-39.9,451.4,3.7,246.8,232.1,238.6v112.2c-17.4,2.8-36,7.2-53,13C128.3,381,99.5,413.2,107.5,470  c15.4,108.8,215,141,198.4-71.6V0.2h110.2V0z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on TikTok</p>
            </div>
        </a>
    </div>

    <div>
        <a class="iconBox  iconBox--facebook" href="">
            <div class="iconBox__icon">
                <svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on Facebook</p>
            </div>
        </a>
    </div>

    <div>
        <a class="iconBox  iconBox--x" href="">
            <div class="iconBox__icon">
                <svg viewBox="10 10 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path class="cls-2" d="m32.82,32.97s-.02-.04-.03-.05c-.14-.21-.28-.41-.43-.62-.78-1.13-1.56-2.27-2.34-3.4-.4-.59-.81-1.18-1.21-1.76-.55-.8-1.1-1.6-1.65-2.4-.45-.65-.89-1.3-1.34-1.95-.39-.57-.78-1.14-1.17-1.71-.18-.26-.35-.51-.53-.77,2.67-3.1,5.33-6.2,8.01-9.31h-.08c-.58,0-1.17,0-1.75,0-.05,0-.09.02-.12.06-.04.06-.09.11-.14.17-.37.43-.74.85-1.1,1.28-.34.4-.68.79-1.02,1.19-.61.71-1.22,1.42-1.83,2.13-.61.71-1.23,1.43-1.84,2.14-.24.28-.48.56-.72.84-.08.09-.16.19-.25.29-.15-.22-.3-.43-.44-.64-.44-.65-.89-1.29-1.33-1.94-.32-.46-.64-.93-.96-1.39-.59-.86-1.18-1.72-1.77-2.57-.34-.49-.68-.99-1.02-1.48-.02-.04-.05-.05-.09-.05-2.12,0-4.23,0-6.35,0h0c.11.17.22.32.33.48.31.45.61.89.92,1.34.48.7.96,1.39,1.44,2.08.41.59.81,1.18,1.22,1.78.41.6.82,1.19,1.23,1.79.37.53.73,1.06,1.1,1.6.59.85,1.17,1.71,1.76,2.56.14.2.27.4.41.6-.13.15-.25.29-.38.44-.47.55-.94,1.09-1.41,1.64-.76.88-1.52,1.77-2.28,2.65-.94,1.09-1.87,2.18-2.81,3.27-.45.53-.91,1.06-1.36,1.58-.04.05-.09.1-.13.16,0,0-.02,0-.02.01.02,0,.03.01.05.01.62,0,1.24,0,1.86,0,0,0,0,0,0-.01.18-.2.36-.41.53-.61.34-.39.67-.78,1.01-1.18,1.03-1.2,2.07-2.4,3.1-3.61.74-.86,1.48-1.72,2.22-2.58.14-.17.28-.33.43-.5.01-.01.02-.02.04-.04.04.05.07.1.1.15.63.92,1.26,1.84,1.89,2.75.67.98,1.35,1.96,2.02,2.94.5.73,1,1.46,1.5,2.19.11.17.23.34.34.5h6.41s0,0-.01-.01Zm-2.67-1.36c-.91,0-1.82,0-2.72,0-.09,0-.14-.03-.18-.09-.49-.71-.99-1.42-1.48-2.13-.3-.43-.6-.86-.91-1.3-.87-1.25-1.75-2.5-2.62-3.75-.4-.58-.81-1.16-1.21-1.74-.41-.59-.82-1.18-1.24-1.77-.29-.42-.59-.84-.89-1.26-.28-.4-.56-.8-.84-1.2-.5-.71-.99-1.42-1.49-2.13-.49-.7-.98-1.41-1.48-2.11-.31-.44-.62-.89-.93-1.33-.08-.12-.17-.24-.26-.37h.07c.92,0,1.83,0,2.75,0,.02,0,.04,0,.07,0,0,0,0,0,.01,0,.02.02.04.05.06.07.44.63.88,1.25,1.31,1.88l2.97,4.25c.37.53.74,1.06,1.11,1.59.65.92,1.29,1.85,1.94,2.77.32.45.63.91.95,1.36.32.46.64.92.96,1.38.66.95,1.32,1.9,1.99,2.84.32.46.64.92.97,1.38.38.54.76,1.08,1.13,1.62,0,.01.02.03.03.05h-.07Z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on X</p>
            </div>
        </a>
    </div>
</div>

<div class="grid  grid-3-cols">
    <div>
        <a class="iconBox  iconBox--linkedin" href="">
            <div class="iconBox__icon">
                <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M40.824 49.5618V36.3354C40.824 33.1814 40.7599 29.1225 36.4255 29.1225C32.0246 29.1225 31.3525 32.5544 31.3525 36.1027V49.5618H22.9117V22.3633H31.02V26.0707H31.1292C32.2621 23.9332 35.0171 21.6769 39.133 21.6769C47.6854 21.6769 49.2671 27.3057 49.2671 34.6325V49.5618H40.824ZM13.3785 18.6417C12.7346 18.642 12.0969 18.5153 11.502 18.2689C10.9071 18.0225 10.3667 17.6611 9.91156 17.2056C9.45647 16.7501 9.09567 16.2093 8.84984 15.6141C8.604 15.019 8.47794 14.3812 8.47887 13.7373C8.47934 12.7678 8.7673 11.8201 9.30633 11.0143C9.84536 10.2084 10.6113 9.58048 11.5072 9.20989C12.4031 8.8393 13.3887 8.74271 14.3395 8.93231C15.2903 9.12192 16.1636 9.58921 16.8488 10.2751C17.534 10.961 18.0005 11.8347 18.1891 12.7857C18.3778 13.7366 18.2803 14.7222 17.9088 15.6178C17.5374 16.5133 16.9087 17.2786 16.1023 17.8168C15.2959 18.3551 14.348 18.6421 13.3785 18.6417ZM17.6108 49.5618H9.14625V22.3633H17.6108V49.5618ZM53.4875 0.988281H4.90925C2.58413 0.988281 0.703125 2.82653 0.703125 5.09466V53.8819C0.703125 56.1524 2.58413 57.9883 4.90925 57.9883H53.4804C55.8031 57.9883 57.7031 56.1524 57.7031 53.8819V5.09466C57.7031 2.82653 55.8031 0.988281 53.4804 0.988281H53.4875Z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on LinkedIn</p>
            </div>
        </a>
    </div>

    <div>
        <a class="iconBox  iconBox--instagram" href="">
            <div class="iconBox__icon">
                <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on Instagram</p>
            </div>
        </a>
    </div>

    <div>
        <a class="iconBox  iconBox--youtube" href="">
            <div class="iconBox__icon">
                <svg width="82" height="58" viewBox="0 0 82 58" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M79.946 9.94998C79.4826 8.23088 78.5771 6.6631 77.3196 5.40271C76.062 4.14231 74.4963 3.23325 72.7783 2.766C66.4079 1.01679 40.9222 0.988312 40.9222 0.988312C40.9222 0.988312 15.4407 0.959836 9.06623 2.63176C7.34925 3.12051 5.78674 4.04243 4.52871 5.30901C3.27068 6.57559 2.35936 8.14431 1.88225 9.86455C0.202191 16.2349 0.185919 29.4476 0.185919 29.4476C0.185919 29.4476 0.169647 42.7254 1.8375 49.0307C2.77313 52.5169 5.51899 55.2709 9.00928 56.2106C15.4448 57.9598 40.8612 57.9883 40.8612 57.9883C40.8612 57.9883 66.3469 58.0167 72.7173 56.3489C74.4359 55.8824 76.0031 54.9755 77.2638 53.7177C78.5245 52.4598 79.435 50.8947 79.9053 49.1771C81.5894 42.8108 81.6016 29.6022 81.6016 29.6022C81.6016 29.6022 81.683 16.3204 79.946 9.94998ZM32.7701 41.688L32.7904 17.2804L53.9722 29.5046L32.7701 41.688Z" />
                </svg>
            </div>
            <div class="iconBox__content">
                <p>Staffordshire University Biological &amp; Biomedical Sciences on YouTube</p>
            </div>
        </a>
    </div>
</div>
 
<div class="grid  grid-3-cols">
  <div>
    <a class="iconBox  iconBox--tiktok" href="">
      <div class="iconBox__icon">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 571.7 666.6" style="enable-background:new 0 0 571.7 666.6;" xml:space="preserve">
          <path d="M416.1,0c11,94.6,63.8,151,155.6,157v106.4c-53.2,5.2-99.8-12.2-154-45v199  c0,252.8-275.6,331.8-386.4,150.6C-39.9,451.4,3.7,246.8,232.1,238.6v112.2c-17.4,2.8-36,7.2-53,13C128.3,381,99.5,413.2,107.5,470  c15.4,108.8,215,141,198.4-71.6V0.2h110.2V0z"/>
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on TikTok</p>
      </div>
    </a>
  </div>

  <div>
    <a class="iconBox  iconBox--facebook" href="">
      <div class="iconBox__icon">
        <svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on Facebook</p>
      </div>
    </a>
  </div>

  <div>
    <a class="iconBox  iconBox--x" href="">
      <div class="iconBox__icon">     
        <svg viewBox="10 10 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path class="cls-2" d="m32.82,32.97s-.02-.04-.03-.05c-.14-.21-.28-.41-.43-.62-.78-1.13-1.56-2.27-2.34-3.4-.4-.59-.81-1.18-1.21-1.76-.55-.8-1.1-1.6-1.65-2.4-.45-.65-.89-1.3-1.34-1.95-.39-.57-.78-1.14-1.17-1.71-.18-.26-.35-.51-.53-.77,2.67-3.1,5.33-6.2,8.01-9.31h-.08c-.58,0-1.17,0-1.75,0-.05,0-.09.02-.12.06-.04.06-.09.11-.14.17-.37.43-.74.85-1.1,1.28-.34.4-.68.79-1.02,1.19-.61.71-1.22,1.42-1.83,2.13-.61.71-1.23,1.43-1.84,2.14-.24.28-.48.56-.72.84-.08.09-.16.19-.25.29-.15-.22-.3-.43-.44-.64-.44-.65-.89-1.29-1.33-1.94-.32-.46-.64-.93-.96-1.39-.59-.86-1.18-1.72-1.77-2.57-.34-.49-.68-.99-1.02-1.48-.02-.04-.05-.05-.09-.05-2.12,0-4.23,0-6.35,0h0c.11.17.22.32.33.48.31.45.61.89.92,1.34.48.7.96,1.39,1.44,2.08.41.59.81,1.18,1.22,1.78.41.6.82,1.19,1.23,1.79.37.53.73,1.06,1.1,1.6.59.85,1.17,1.71,1.76,2.56.14.2.27.4.41.6-.13.15-.25.29-.38.44-.47.55-.94,1.09-1.41,1.64-.76.88-1.52,1.77-2.28,2.65-.94,1.09-1.87,2.18-2.81,3.27-.45.53-.91,1.06-1.36,1.58-.04.05-.09.1-.13.16,0,0-.02,0-.02.01.02,0,.03.01.05.01.62,0,1.24,0,1.86,0,0,0,0,0,0-.01.18-.2.36-.41.53-.61.34-.39.67-.78,1.01-1.18,1.03-1.2,2.07-2.4,3.1-3.61.74-.86,1.48-1.72,2.22-2.58.14-.17.28-.33.43-.5.01-.01.02-.02.04-.04.04.05.07.1.1.15.63.92,1.26,1.84,1.89,2.75.67.98,1.35,1.96,2.02,2.94.5.73,1,1.46,1.5,2.19.11.17.23.34.34.5h6.41s0,0-.01-.01Zm-2.67-1.36c-.91,0-1.82,0-2.72,0-.09,0-.14-.03-.18-.09-.49-.71-.99-1.42-1.48-2.13-.3-.43-.6-.86-.91-1.3-.87-1.25-1.75-2.5-2.62-3.75-.4-.58-.81-1.16-1.21-1.74-.41-.59-.82-1.18-1.24-1.77-.29-.42-.59-.84-.89-1.26-.28-.4-.56-.8-.84-1.2-.5-.71-.99-1.42-1.49-2.13-.49-.7-.98-1.41-1.48-2.11-.31-.44-.62-.89-.93-1.33-.08-.12-.17-.24-.26-.37h.07c.92,0,1.83,0,2.75,0,.02,0,.04,0,.07,0,0,0,0,0,.01,0,.02.02.04.05.06.07.44.63.88,1.25,1.31,1.88l2.97,4.25c.37.53.74,1.06,1.11,1.59.65.92,1.29,1.85,1.94,2.77.32.45.63.91.95,1.36.32.46.64.92.96,1.38.66.95,1.32,1.9,1.99,2.84.32.46.64.92.97,1.38.38.54.76,1.08,1.13,1.62,0,.01.02.03.03.05h-.07Z"/>
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on X</p>
      </div>
    </a>
  </div>
</div>

<div class="grid  grid-3-cols">
  <div>
    <a class="iconBox  iconBox--linkedin" href="">
      <div class="iconBox__icon">    
        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M40.824 49.5618V36.3354C40.824 33.1814 40.7599 29.1225 36.4255 29.1225C32.0246 29.1225 31.3525 32.5544 31.3525 36.1027V49.5618H22.9117V22.3633H31.02V26.0707H31.1292C32.2621 23.9332 35.0171 21.6769 39.133 21.6769C47.6854 21.6769 49.2671 27.3057 49.2671 34.6325V49.5618H40.824ZM13.3785 18.6417C12.7346 18.642 12.0969 18.5153 11.502 18.2689C10.9071 18.0225 10.3667 17.6611 9.91156 17.2056C9.45647 16.7501 9.09567 16.2093 8.84984 15.6141C8.604 15.019 8.47794 14.3812 8.47887 13.7373C8.47934 12.7678 8.7673 11.8201 9.30633 11.0143C9.84536 10.2084 10.6113 9.58048 11.5072 9.20989C12.4031 8.8393 13.3887 8.74271 14.3395 8.93231C15.2903 9.12192 16.1636 9.58921 16.8488 10.2751C17.534 10.961 18.0005 11.8347 18.1891 12.7857C18.3778 13.7366 18.2803 14.7222 17.9088 15.6178C17.5374 16.5133 16.9087 17.2786 16.1023 17.8168C15.2959 18.3551 14.348 18.6421 13.3785 18.6417ZM17.6108 49.5618H9.14625V22.3633H17.6108V49.5618ZM53.4875 0.988281H4.90925C2.58413 0.988281 0.703125 2.82653 0.703125 5.09466V53.8819C0.703125 56.1524 2.58413 57.9883 4.90925 57.9883H53.4804C55.8031 57.9883 57.7031 56.1524 57.7031 53.8819V5.09466C57.7031 2.82653 55.8031 0.988281 53.4804 0.988281H53.4875Z" />
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on LinkedIn</p>
      </div>
    </a>
  </div>

  <div>
    <a class="iconBox  iconBox--instagram" href="">
      <div class="iconBox__icon">
        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on Instagram</p>
      </div>
    </a>
  </div>

  <div>
    <a class="iconBox  iconBox--youtube" href="">
      <div class="iconBox__icon">    
        <svg width="82" height="58" viewBox="0 0 82 58" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M79.946 9.94998C79.4826 8.23088 78.5771 6.6631 77.3196 5.40271C76.062 4.14231 74.4963 3.23325 72.7783 2.766C66.4079 1.01679 40.9222 0.988312 40.9222 0.988312C40.9222 0.988312 15.4407 0.959836 9.06623 2.63176C7.34925 3.12051 5.78674 4.04243 4.52871 5.30901C3.27068 6.57559 2.35936 8.14431 1.88225 9.86455C0.202191 16.2349 0.185919 29.4476 0.185919 29.4476C0.185919 29.4476 0.169647 42.7254 1.8375 49.0307C2.77313 52.5169 5.51899 55.2709 9.00928 56.2106C15.4448 57.9598 40.8612 57.9883 40.8612 57.9883C40.8612 57.9883 66.3469 58.0167 72.7173 56.3489C74.4359 55.8824 76.0031 54.9755 77.2638 53.7177C78.5245 52.4598 79.435 50.8947 79.9053 49.1771C81.5894 42.8108 81.6016 29.6022 81.6016 29.6022C81.6016 29.6022 81.683 16.3204 79.946 9.94998ZM32.7701 41.688L32.7904 17.2804L53.9722 29.5046L32.7701 41.688Z" />
        </svg>
      </div>
      <div class="iconBox__content">
        <p>Staffordshire University Biological &amp; Biomedical Sciences on YouTube</p>
      </div>
    </a>
  </div>
</div>
  • Content: 
    .iconBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: calc(#{$spacing-md} + 2.5%) $spacing-xs;
  margin: 0 0 $spacing-md;
  background: $neutral--primary;
  color: white;
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 600;

  // --

  &__icon {
    flex: 1 1 $spacing-3xl;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;
    @include typescale('3xl');
    text-align: center;

    .icon, img {
      display: block;
      margin: auto auto $spacing-lg;
    }

    & > svg {
      width: 1em;
      height: 1em;
    }
  }

  &__content {
    flex: 1 1 80%;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin: 0 0 $spacing-sm;
  }

  // --

  @each $name, $value in $socialmedia-prime-colours {
    &--#{$name} {
      background: #{$value};
      color: white;
    }
  }

  @each $name, $value in $icon-box-colors {
    &--bg-#{$name} {
      background: #{$value};
    }
  }

  .iconBox__icon svg {
    fill: white;
  }

  &--bg-offwhite, &--bg-neon {
    color: $dark-blue;

    & .iconBox__icon svg {
      fill: $dark-blue;
    }
  }
}

a.iconBox {
  &:hover {
    color: white;

    .iconBox__title {
      color: white;
      text-decoration: underline;
    }

    &.iconBox--bg-offwhite, &.iconBox--bg-neon
    {
      color: inherit;

      .iconBox__title {
        color: inherit;
      }
    }
  }
}

.grid-3-cols {

  & .iconBox__icon svg {
    vertical-align: top;
  }

}
  • URL: /components/raw/iconbox/_iconBox.scss
  • Filesystem Path: src\components\iconBox\_iconBox.scss
  • Size: 1.7 KB
  • Handle: @iconbox--social-media
  • Preview:
  • Filesystem Path: src\components\iconBox\iconBox--social-media.twig