.us-overlay slides in from either side of the viewport, or can be shown as a modal window.
<button class="us-btn js-open-overlay" modifier="{$modifiers}">Open</button>
<div class="us-overlay-parent" modifier="{$modifiers}">
<div class="us-overlay">
<div class="us-overlay__container">
<div class="us-overlay__header">
<div class="us-overlay__title">
Overlay
</div>
<button class="us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay">Close</button>
</div>
<div class="us-overlay__body">
Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.
Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.
Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.
Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.
Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.
</div>
</div>
</div>
</div>
var overlay = new Overlay({
bodyActiveClass: 'us-overlay--open',
activeClass: 'us-overlay-parent--active',
visibleClass: 'us-overlay-parent--visible',
overlay: $('.us-overlay-parent'),
openButton: '.js-open-overlay',
closeButton: '.js-close-overlay',
historyStatus: '#seedeal',
history: false,
preventDefault: true
});
These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.
Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.
Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.
Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.
<div class='us-tabs'>
<nav class='us-tabs-nav'>
<div class='us-tabs-nav-wrapper'>
<div class='us-tabs-nav-menu'>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab1">Tab 1</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab2">Tab 2</a>
<a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab3">Tab 3</a>
</div>
</div>
</nav>
<div class='us-tabs-container'>
<div class='us-tab' id='tab1'>
<h2 class='us-tab-title'>
<a class="us-tabs-nav-mainlink" href="#tab1">
Test 1
<svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
</a>
</h2>
<div class='us-tab-content'>
<p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>
</div>
</div>
<div class='us-tab' id='tab2'>
<h2 class='us-tab-title'>
<a class="us-tabs-nav-mainlink" href="#tab2">
Test 2
<svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
</a>
</h2>
<div class='us-tab-content'>
<p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
</div>
</div>
<div class='us-tab' id='tab3'>
<h2 class='us-tab-title'>
<a class="us-tabs-nav-mainlink" href="#tab3">
Test 3
<svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
</a>
</h2>
<div class='us-tab-content'>
<p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>
</div>
</div>
</div>
</div>
var tabs = new Tabs({
tabContainer: ".us-tabs",
tabLinks: ".us-tabs-nav-mainlink",
tabTitle: "us-tab-title",
activeClass: "active",
changeUrls: true,
collapsible: true,
autoScroll: false
});
.us-tooltip can be applied to any parent, and by hovering over it, it will toggle the visibility of .us-tooltip__note. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.
<div class="tooltip-demo us-tooltip">
<div class="us-field">
<label for='name'>Name</label>
<input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>
</div>
<div class="us-tooltip__wrapper">
<div class="us-tooltip__icon"></div>
<div class="us-tooltip__note">
<div class="us-tooltip__arrow"></div>
<strong>Tooltip</strong> message content
</div>
</div>
</div>
var tooltips = new ClassToggler({
containerClass: '.us-tooltip',
$target: $('.us-tooltip__icon'),
activeClass: "us-tooltip--active"
});
Copyright uSwitch Limited 2016 - 2017. Github