sui-test.live.solas.britishcouncil.digital Open in urlscan Pro
23.67.143.233  Public Scan

Submitted URL: http://sui-test.live.solas.britishcouncil.digital/
Effective URL: http://sui-test.live.solas.britishcouncil.digital/0.3.2/
Submission: On January 02 via manual from AE — Scanned from DE

Form analysis 0 forms found in the DOM

Text Content

SUi
Components

 * alerts
 * banner
 * brand
 * breadcrumbs
 * buttons
 * card
 * carousels-part-1
 * carousels-part-2
 * carousels-part-3-lazy-loaded
 * drill-down
 * editorpicks
 * factspanel
 * filters
 * footers
 * forms
 * glossary
 * grids-and-utilities
 * headers
 * hero
 * icon-lists
 * icons
 * imageScroll
 * linkpanels
 * listings-linear
 * listings-standard
 * listings-visual-lazy-load
 * listings-visual
 * listings-zigzag
 * media
 * multicolorrows
 * navbars
 * pagination
 * panels
 * quote
 * secondary-navigation-expanded
 * secondary-navigation-roll-up
 * secondary-navigation
 * show-hides
 * socialmedia
 * stepper
 * tables
 * tabs
 * title
 * typography
 * wells

 * Examples
 * Settings
   * LTR RTL
   * Default White Brick Red Green Black Grey Blue Powdery Blue LiveSkills IELTS
     Active Green Study UK
 * GitHub


SOLAS UI COMPONENTS



Home of the Solas UI components. v0.3.2

 * alerts
 * banner
 * brand
 * breadcrumbs
 * buttons
 * card
 * carousels-part-1
 * carousels-part-2
 * carousels-part-3-lazy-loaded
 * drill-down
 * editorpicks
 * factspanel
 * filters
 * footers
 * forms
 * glossary
 * grids-and-utilities
 * headers
 * hero
 * icon-lists
 * icons
 * imageScroll
 * linkpanels
 * listings-linear
 * listings-standard
 * listings-visual-lazy-load
 * listings-visual
 * listings-zigzag
 * media
 * multicolorrows
 * navbars
 * pagination
 * panels
 * quote
 * secondary-navigation-expanded
 * secondary-navigation-roll-up
 * secondary-navigation
 * show-hides
 * socialmedia
 * stepper
 * tables
 * tabs
 * title
 * typography
 * wells


GETTING STARTED

Add this stylesheet to your HTML pages, and start styling

  <link rel="stylesheet" href="http://bcteam.github.io/Solas-UI/0.3.2/css/bc-theme.css">


Or start off with some boilerplate

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="http://bcteam.github.io/Solas-UI/0.3.2/css/bc-theme.css">
    </head>

    <body>
      <header class="navbar bc-navbar-default">
        <div class="container">
          <h2 class="navbar-header">
            <div class="navbar-brand bc-brand-has-secondary-logo-and-slogan">
              <a href="#" class="bc-brand-logo">British Council</a>
              <span class="bc-brand-slogan">Starter Page</span>
            </div>
          </h2>
        </div>
      </header>

      <div class="container">
        <div class="col-md-12">
            Content here
        </div>
      </div>

      <!-- Including the JS Core is optional, and comes pre-bundled with jQuery 1.11.3 -->
      <script src="http://bcteam.github.io/Solas-UI/0.3.2/scripts/main.js">
    </body>
  </html>



JS COMPONENTS

In most cases, using the documented HTML markup will automatically trigger the
appropiate JS for each individual component without needing to do anything
extra. However there may be cases where content is dynamically added after page
load. In such cases, the components would need to be invoked manually through
the bcSui global object.

  // Initialise listings component
  bcSui.components.listings.init();

  // Initialise tabs component
  bcSui.components.tabs.init();