BX Swiss Component Library

Footer

The footer component should only be used to visually set the footer content of the website apart from the main content.

It contains multiple other components which are placed within a grid system.

<footer class="footer">
    <a href="#"><svg viewBox="0 0 24 24" class="icon icon--m logo__visual">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#bx-swiss"></use>
	</svg></a>
    <nav role="navigation">
        <ul class="grid">
            <li class="cell cell--1/2 cell--medium-1/4">
                <div class="footer__title heading heading--tiny">BX Swiss</div>
                <ul class="unstyled">
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">About BX Swiss</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Why BX Swiss</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">History</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Organization</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Trading memebrs</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Contact</a>
                    </li>
                </ul>
            </li>
            <li class="cell cell--1/2 cell--medium-1/4">
                <div class="footer__title heading heading--tiny">Instruments</div>
                <ul class="unstyled">
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Shares</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Funds</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Bonds</a>
                    </li>
                </ul>
            </li>
            <li class="cell cell--1/2 cell--medium-1/4">
                <div class="footer__title heading heading--tiny">Tools</div>
                <ul class="unstyled">
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Reporting tool</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Issuer extranet</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Watchlist</a>
                    </li>
                </ul>
            </li>
            <li class="cell cell--1/2 cell--medium-1/4">
                <div class="footer__title heading heading--tiny">Information</div>
                <ul class="unstyled">
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Regulatory</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Share holders</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Latest trades</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Notices</a>
                    </li>
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">Market calendar</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</footer>
 
<footer class="footer">
    <a href="#">{{{icon 'bx-swiss' size='m' classes='logo__visual'}}}</a>
    <nav role="navigation">
        <ul class="grid">
            {{#each items }}
            <li class="cell cell--1/2 cell--medium-1/4">
                <div class="footer__title heading heading--tiny">{{ title }}</div>
                <ul class="unstyled">
                    {{#each items }}
                    <li>
                        <a href="#" class="heading heading--tiny text-bold">{{ title }}</a>
                    </li>
                    {{/each}}
                </ul>
            </li>
            {{/each}}
        </ul>
    </nav>
</footer>
 
{
  "items": [
    {
      "title": "BX Swiss",
      "items": [
        {
          "title": "About BX Swiss"
        },
        {
          "title": "Why BX Swiss"
        },
        {
          "title": "History"
        },
        {
          "title": "Organization"
        },
        {
          "title": "Trading memebrs"
        },
        {
          "title": "Contact"
        }
      ]
    },
    {
      "title": "Instruments",
      "items": [
        {
          "title": "Shares"
        },
        {
          "title": "Funds"
        },
        {
          "title": "Bonds"
        }
      ]
    },
    {
      "title": "Tools",
      "items": [
        {
          "title": "Reporting tool"
        },
        {
          "title": "Issuer extranet"
        },
        {
          "title": "Watchlist"
        }
      ]
    },
    {
      "title": "Information",
      "items": [
        {
          "title": "Regulatory"
        },
        {
          "title": "Share holders"
        },
        {
          "title": "Latest trades"
        },
        {
          "title": "Notices"
        },
        {
          "title": "Market calendar"
        }
      ]
    }
  ]
}