---
title: Component Library
subsection: OLD – WILL BE DELETED
description: This styleguide shows a true representation of the CSS on the current international site.
docs: true

navgroup: docs
navactive: docsgulp
---


    <!-- Logo -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Logos</h2>
            <div class="sg-logos">
                <h3>Large – Red</h3>
                <img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/je-logo-large.png" title="JUST EAT">
                <h3>Small – Red</h3>
                <img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/just-eat-logo.png" title="JUST EAT">
                <h3>Large – White</h3>
                <img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/je-whiteout-retina.png" title="JUST EAT">
            </div>
        </div>
    </div>


    <!-- Swatches -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Swatches</h2>

            <ul class="g g--gutter">
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-primary">
                        <div class="sg-swatch-color"></div>
                        <code>$color-primary</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-secondary">
                        <div class="sg-swatch-color"></div>
                        <code>$color-secondary</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-highlight">
                        <div class="sg-swatch-color"></div>
                        <code>$color-highlight</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-text">
                        <div class="sg-swatch-color"></div>
                        <code>$color-text</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-background">
                        <div class="sg-swatch-color"></div>
                        <code>$color-bg</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-border">
                        <div class="sg-swatch-color"></div>
                        <code>$color-border</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-link">
                        <div class="sg-swatch-color"></div>
                        <code>$color-link-default</code>
                    </div>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="sg-swatch sg-color-link-hover">
                        <div class="sg-swatch-color"></div>
                        <code>$color-link-hover</code>
                    </div>
                </li>
            </ul>

        </div>
    </div>


    <!-- Typography -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Typography</h2>

            <!-- Headings -->
            <h3 class="sg-interfaceType sg-interfaceType--subtle">Primary typeface</h3>
            <div class="g g--gutter">
                <div class="g-span4--mid g-col sg-typeSpecimen sg-typeSpecimen--primary sg-typeSpecimen--giant">
                    ABC
                </div>

                <div class="g-span8--mid g-col">
                    <div class="sg-typeSpecimen sg-typeSpecimen--primary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
                        abcdefghijklmnopqrstuvwxyz <br>
                        0123456789 (.,:;?!£$@*&)
                    </div>
                </div>
            </div>

            <!-- Body -->
            <h3 class="sg-interfaceType sg-interfaceType--subtle">Secondary typeface</h3>
            <div class="g g--gutter">
                <div class="g-span4--mid g-col sg-typeSpecimen sg-typeSpecimen--secondary sg-typeSpecimen--giant">
                    ABC
                </div>

                <div class="g-span8--mid g-col">
                    <div class="sg-typeSpecimen sg-typeSpecimen--secondary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
                        abcdefghijklmnopqrstuvwxyz <br>
                        0123456789 (.,:;?!£$@*&)
                    </div>
                </div>
            </div>

            <!-- Add any more that you need -->

        </div>
    </div>


    <!-- Typography examples -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Typography examples</h2>
            <div class="g g--gutter">
                <div class="g-span6 g-col">
                    <h3 class="sg-interfaceType sg-interfaceType--subtle">Headings</h3>
                    <h1>Heading 1</h1>
                    <h2>Heading 2</h2>
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <h5>Heading 5</h5>
                    <h6>Heading 6</h6>
                </div>
                <div class="g-span6 g-col">
                    <h3 class="sg-interfaceType sg-interfaceType--subtle">Paragraphs</h3>
                    <p>Donec sed odio dui. Curabitur <a href="">blandit tempus</a> porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur <b>purus sit amet fermentum</b>.</p>
                    <p>Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>

            <h3 class="sg-interfaceType sg-interfaceType--subtle">Typeface sizes</h3>
            <div class="g g--gutter">
                <div class="g-span6 g-col">
                    <div class="sg-type sg-type-smaller"><div class="sg-type-item">Example text</div> <code>$type-smaller</code></div>
                    <div class="sg-type sg-type-small"><div class="sg-type-item">Example text</div> <code>$type-small</code></div>
                    <div class="sg-type sg-type-base"><div class="sg-type-item">Example text</div> <code>$type-base</code></div>
                </div>
                <div class="g-span6 g-col">
                    <div class="sg-type sg-type-large"><div class="sg-type-item">Example text</div> <code>$type-large</code></div>
                    <div class="sg-type sg-type-larger"><div class="sg-type-item">Example text</div> <code>$type-larger</code></div>
                    <div class="sg-type sg-type-largest"><div class="sg-type-item">Example text</div> <code>$type-largest</code></div>
                    <div class="sg-type sg-type-jumbo"><div class="sg-type-item">Example text</div> <code>$type-jumbo</code></div>
                </div>
            </div>

            <h3 class="sg-interfaceType sg-interfaceType--subtle">Blockquote</h3>
            <blockquote>
                <p>Of all the gin joints in all the towns in all the world, she walks into mine.</p>
                <small>Rick Blaine</small>
            </blockquote>

        </div>
    </div>


    <!-- Components -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Components</h2>

            <h3 class="sg-interfaceType sg-interfaceType--subtle">Buttons</h3>
            <a href="#" class="btn">Normal button</a>
            <br>
            <br>
            <a href="#" class="btn btn--primary">Primary button</a>


        </div>
    </div>


    <!-- Forms -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Form elements</h2>

            <form action="#" class="form form--horizontal">
                <fieldset class="form-fieldset">
                    <div class="form-controlGroup">
                        <label for="text" class="form-label">Text</label>
                        <div class="form-controlGroup-inputWrapper">
                            <input type="text" id="text" placeholder="Joe Bloggs" class="form-input" required/>
                        </div>
                    </div>
                    <div class="form-controlGroup">
                        <label for="comments" class="form-label">Textarea</label>
                        <div class="form-controlGroup-inputWrapper">
                            <textarea id="comments" rows="3" cols="50" class="form-input form-input--textarea"></textarea>
                        </div>
                    </div>
                    <div class="form-controlGroup">
                        <label for="choice" class="form-label">Choice</label>
                        <div class="form-controlGroup-inputWrapper">
                            <select id="choice" class="form-input form-input--select">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                                <option>Option 4</option>
                                <option>Option 5</option>
                            </select>
                        </div>
                    </div>

                    <div class="g g--gutter">
                        <div class="form-controlGroup g-span6 g-col">
                            <label class="form-label">Checkboxes</label>
                            <div class="form-controlGroup-inputWrapper">
                                <div class="control">
                                    <input id="check1" type="checkbox" value="check1">
                                    <label for="check1">
                                        This is a checkbox
                                    </label>
                                </div>
                                <label class="control control--custom control--checkbox">
                                    <input type="checkbox" value="check4">
                                    <span class="control-indicator"></span>
                                    This is a custom checkbox
                                </label>
                            </div>
                        </div>

                        <div class="form-controlGroup g-span6 g-col">
                            <label class="form-label">Radio buttons</label>
                            <div class="form-controlGroup-inputWrapper">
                                <label class="control">
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                    This is a radio
                                </label>
                                <label class="control control--custom control--radio">
                                    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
                                    <span class="control-indicator"></span>
                                    This is a custom radio button
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <h3 class="sg-interfaceType sg-interfaceType--subtle">Validation information</h3>
                <fieldset class="form-fieldset">
                    <div class="form-controlGroup has-success">
                        <label for="textSuccess" class="form-label">Input with success</label>
                        <div class="form-controlGroup-inputWrapper">
                            <input type="text" id="textSuccess" class="form-input" value="A value"/>
                            <div class="form-message">
                                Yay!
                            </div>
                        </div>
                    </div>
                    <div class="form-controlGroup has-error">
                        <label for="textError" class="form-label">Input with error</label>
                        <div class="form-controlGroup-inputWrapper">
                            <input type="text" id="textError" class="form-input" value="A value"/>
                            <div class="form-message">
                                Please correct the error
                            </div>
                        </div>
                    </div>
                    <div class="form-controlGroup has-warning">
                        <label for="textWarning" class="form-label">Input with warning</label>
                        <div class="form-controlGroup-inputWrapper">
                            <input type="text" id="textWarning" class="form-input" value="A value"/>
                            <div class="form-message">
                                Something may have gone wrong
                            </div>
                        </div>
                    </div>
                    <div class="form-controlGroup has-info">
                        <label for="textInfo" class="form-label">Input with info</label>
                        <div class="form-controlGroup-inputWrapper">
                            <input type="text" id="textInfo" class="form-input" value="A value"/>
                            <div class="form-message">
                                Username is taken
                            </div>
                        </div>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="form-message has-warning is-hidden">
                        Some fields need attention
                    </div>

                    <input type="submit" value="Submit" class="btn btn--primary" />
                    <input type="reset" class="btn" value="Cancel" />
                </div>

            </form>
        </div>
    </div>


    <!-- Icons -->
    <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">Icons</h2>

            <h3 class="sg-interfaceType sg-interfaceType--subtle">Interface icons</h3>
            <ul class="g g--gutter">
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-social-instagram"></div>
                    <code>.icon-social-instagram</code>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-social-twitter"></div>
                    <code>.icon-social-twitter</code>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-social-pinterest"></div>
                    <code>.icon-social-pinterest</code>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-social-facebook"></div>
                    <code>.icon-social-facebook</code>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-social-youtube"></div>
                    <code>.icon-social-youtube</code>
                </li>
                <li class="g-col g-span6 g-span4--mid">
                    <div class="icon-sg icon-email"></div>
                    <code>.icon-email</code>
                </li>
            </ul>

            <h3 class="sg-interfaceType sg-interfaceType--subtle">Favicons</h3>

            <div class="sg-favicon">
                <img src="{{ baseUrl }}/assets/dist/img/icons/core/favicon.ico" alt="" width="16">
                <code>16x16</code>
            </div>
            <div class="sg-favicon">
                <img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-iphone-precomposed.png" alt="" width="57">
                <code>57x57 (iPhone app icon)</code>
            </div>
            <div class="sg-favicon">
                <img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-ipad-precomposed.png" alt="" width="72">
                <code>72x72 (iPad app icon)</code>
            </div>
            <div class="sg-favicon">
                <img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-iphone-retina-precomposed.png" alt="" width="114">
                <code>114x114 (iPhone app icon retina)</code>
            </div>
            <div class="sg-favicon">
                <img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-ipad-retina-precomposed.png" alt="" width="144">
                <code>144x144 (iPad app icon retina)</code>
            </div>

        </div>
    </div>


    <!-- Please add more to this to keep your styleguide useful -->

    <!-- Add more here :) -->
    <!-- <div class="sg-page">
        <div class="l-container">
            <h2 class="sg-sectionHeading">More stuff</h2>

        </div>
    </div> -->