Component Library

footer 

<footer role="contentinfo" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4">
                <div class="row">
                    <h2 class="heading heading--footer ">Footer header</h2>

                    <p class="paragraph  ">Novicell Aarhus<br>Søren Nymarks Vej 6<br>8270 Højbjerg,<br>Denmark</p>
                    <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>
                </div>
            </div>

            <div class="col-xs-12 col-sm-4">
                <h2 class="heading heading--footer ">Footer header</h2>

                <ul class="link-list ">
                    <li class="link-list__item">
                        <a href="#" title="Link title 1" target="" class="link   " property="url">Link text 1</a>

                    </li>
                    <li class="link-list__item">
                        <a href="#" title="Link title 2" target="" class="link   " property="url">Link text 2</a>

                    </li>
                    <li class="link-list__item">
                        <a href="#" title="Link title 3" target="" class="link   " property="url">Link text 3</a>

                    </li>
                </ul>

            </div>

            <div class="col-xs-12 col-sm-4">
                <h2 class="heading heading--footer ">Send us your inquiry</h2>

                <div class="form-field ">
                    <label class="label  " for="">
    Text label
    
</label>
                    <input class="input  " type="text" name="text-input" id="text-id" placeholder="Insert text" />

                </div>

                <div class="form-field ">
                    <label class="label  " for="">
    Email label
    
</label>
                    <input class="input  " type="email" name="email-input" id="email-id" placeholder="Insert e-mail" />
                </div>

                <div class="form-field ">
                    <label class="label  " for="">
    Textarea label
    
</label>
                    <textarea class="textarea  " name="text-input" id="text-id" placeholder="Insert text"></textarea>
                </div>

                <button type="button" class="button button--gradient">
    gradient
</button>

            </div>
        </div>
    </div>
</footer>
 
<footer role="contentinfo" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4">
                <div class="row">
                    {{ render '@heading--footer' }}
                
                    {{> @paragraph contactInfo }}
                    {{ render '@social-media-collection' }}
                </div>
            </div>

            <div class="col-xs-12 col-sm-4">
                {{ render '@heading--footer' }}
                {{ render '@link-list'}}
            </div>

            <div class="col-xs-12 col-sm-4">
                {{ render '@heading--footer' customColumnHeader }}
                {{ render '@form-field' }}
                {{ render '@form-field--email' }}
                {{ render '@form-field--textarea'  }}
                {{ render '@button--gradient' }}
            </div>
        </div>
    </div>
</footer>
 
{
  "customColumnHeader": {
    "text": "Send us your inquiry"
  },
  "contactInfo": {
    "text": "Novicell Aarhus<br>Søren Nymarks Vej 6<br>8270 Højbjerg,<br>Denmark"
  }
}
  • Content: 
    /*
 * Component: Footer
 */
:root {
    --footer-background-color: var(--color-secondary);
}

.footer {
    background-color: var(--footer-background-color);
    color: var(--color-white);
    padding-top: 30px;
    padding-bottom: 30px;

    a {
        color: currentColor;
    }
}
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: src/03-organisms/footer/footer.css
  • Size: 284 Bytes

There are no notes for this item.