Component Library

social media collection 

<ul class="social-media-list">
    <li class="social-media-list__item">
        <div class="social-link social-link--twitter ">
            <a href="#" title="Twitter link" target="_blank">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-twitter"></use>
        </svg>
    </a>
        </div>
    </li>
    <li class="social-media-list__item">
        <div class="social-link social-link--google-plus ">
            <a href="#" title="Google Plus link" target="_blank">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-google-plus"></use>
        </svg>
    </a>
        </div>
    </li>
    <li class="social-media-list__item">
        <div class="social-link social-link--facebook ">
            <a href="#" title="Facebook link" target="_blank">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-facebook"></use>
        </svg>
    </a>
        </div>
    </li>
</ul>
 
<ul class="social-media-list">
    <li class="social-media-list__item">{{ render '@link-social--twitter' }}</li>
    <li class="social-media-list__item">{{ render '@link-social--google-plus' }}</li>
    <li class="social-media-list__item">{{ render '@link-social--facebook' }}</li>
</ul>
 
/* No context defined for this component. */
  • Content: 
    /*
 * Modul: Social Media Collection
 */

.social-media-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 20px;

    &__item {
        float: left;
    }

    &__item + &__item {
        margin-left: 10px;
    }
}
  • URL: /components/raw/social-media-collection/social-media-collection.css
  • Filesystem Path: src/02-molecules/social-media-collection/social-media-collection.css
  • Size: 257 Bytes

There are no notes for this item.