iWeb Component Library

Breakpoint

Base

Visible for small
Hidden for small
<div class="grid">
    <div><div class="u-block u-fill-neutral-lighter u-visible-sm">Visible for small</div></div>
    <div><div class="u-block u-fill-neutral-lighter u-hidden-sm">Hidden for small</div></div>
</div>

Min Max

Visible for small
Hidden for small
<div class="grid">
    <div><div class="u-block u-fill-neutral-lighter u-visible-sm">Visible for small</div></div>
    <div><div class="u-block u-fill-neutral-lighter u-hidden-sm">Hidden for small</div></div>
</div>

Data

A demo of using data. See documentation for more information.

Base

Company Information
  • Name: iWeb
  • Copyright: ©iWeb is a trading name of Interactive Web Solutions Ltd. 1995 - 2016.
  • Twitter: @iwebtweets
List of Titles
  • Phasellus condimentum ante auctor urna imperdiet
  • Integer imperdiet risus non metus
  • Quisque faucibus quam eu tempor
Random Title

Nullam posuere diam sapien sed

Price
  • Was £15.99
  • Now £19.99
  • Save £4.00
Random Colour

Turquoise

Random Size

Medium

Random First Name

Neil

Random Last Name

Larkin

Random Paragraph

Pellentesque nulla augue, efficitur at pretium non, volutpat in dolor. Quisque quis elit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus interdum nibh, sed sollicitudin ex fermentum sed.

<h5>Company Information</h5>
<ul>
<li>Name: iWeb</li>
<li>Copyright: ©iWeb is a trading name of Interactive Web Solutions Ltd. 1995 - 2016.</li>
<li>Twitter: @iwebtweets</li>
</ul>

<h5>List of Titles</h5>
<ul>
            <li>Phasellus condimentum ante auctor urna imperdiet</li>
            <li>Integer imperdiet risus non metus</li>
            <li>Quisque faucibus quam eu tempor</li>
    </ul>

<h5>Random Title</h5>
<p>Nullam posuere diam sapien sed</p>

<h5>Price</h5>
<ul>
<li>Was &pound;15.99</li>
<li>Now &pound;19.99</li>
<li>Save &pound;4.00</li>
</ul>

<h5>Random Colour</h5>
<p>Turquoise</p>

<h5>Random Size</h5>
<p>Medium</p>

<h5>Random First Name</h5>
<p>Neil</p>

<h5>Random Last Name</h5>
<p>Larkin</p>

<h5>Random Paragraph</h5>
<p>Pellentesque nulla augue, efficitur at pretium non, volutpat in dolor. Quisque quis elit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus interdum nibh, sed sollicitudin ex fermentum sed.</p>

Ellipsis

Base

This is an example of the ellipsis pattern, resize your browser to see it get truncated!
<div class="u-block u-fill-neutral-lighter cc-ellipsis">This is an example of the ellipsis pattern, resize your browser to see it get truncated!</div>

Grid

Base

Box
<div class="grid">
    <div><div class="u-block u-fill-neutral-lighter">Box</div></div>
</div>

Center

Box
<div class="grid g-center">
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter">Box</div></div>
</div>

Col

Box
<div class="grid">
    <div><div class="u-block u-fill-neutral-lighter">Box</div></div>
</div>

Gutter

Box
Box
<div class="grid g-gutter">
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter">Box</div></div>
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter">Box</div></div>
</div>

Justify

1
2
<div class="grid g-space">
    <div class="g-col-xs-4"><div class="u-block u-fill-neutral-lighter">1</div></div>
    <div class="g-col-xs-4"><div class="u-block u-fill-neutral-lighter">2</div></div>
</div>

Reverse

1
2
<div class="grid g-reverse">
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter">1</div></div>
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter">2</div></div>
</div>

Shape

Chevron

<span class="cc-shape-chevron"></span>

Circle

<span class="cc-shape-circle"></span>

Cross

<span class="cc-shape-cross"></span>

Hamburger

<span class="cc-shape-hamburger"></span>

Minus

<span class="cc-shape-minus"></span>

Plus

<span class="cc-shape-plus"></span>

Ring

<span class="cc-shape-ring"></span>

Square

<span class="cc-shape-square"></span>

Tick

<span class="cc-shape-tick"></span>

Triangle

<span class="cc-shape-triangle"></span>

Toggle

Full documentation can be found on our GitHub wiki.

Base

Toggle Hot Dog

🌭

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target="#hotdog">Toggle Hot Dog</a></p>

<div class="u-toggle" id="hotdog">
    <h1>🌭</h1>
</div>

Activate

Activate Beef Burger

🍔

<p><a href="#" data-cc-toggle-action="activate" data-cc-toggle-target="#beefburger">Activate Beef Burger</a></p>

<div class="u-toggle" id="beefburger">
    <h1>🍔</h1>
</div>

Container

Toggle "happy", "sleepy" & "angry"

😀

😴

😠

<div class="smileys">
    <p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-closest-container=".smileys" data-cc-toggle-target=".happy, .sleepy, .angry">Toggle "happy", "sleepy" & "angry"</a></p>
    <div class="u-toggle happy">
        <h1>😀</h1>
    </div>

    <div class="u-toggle sleepy">
        <h1>😴</h1>
    </div>

    <div class="u-toggle angry">
        <h1>😠</h1>
    </div>
</div>

Group

Toggle Mushroom in group "veg"

Toggle Tomato in group "veg"

Toggle Banana in group "fruit"

Toggle Apple in group "fruit"

🍄

🍅

🍌

🍎

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target=".mushroom" class="mushroom">Toggle Mushroom in group "veg"</a></p>
<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target=".tomato" class="tomato">Toggle Tomato in group "veg"</a></p>

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target=".banana" class="banana">Toggle Banana in group "fruit"</a></p>
<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target=".apple" class="apple">Toggle Apple in group "fruit"</a></p>

<div class="u-toggle mushroom" data-cc-toggle-group="veg" data-cc-toggle-target-callback=".mushroom">
    <h1>🍄</h1>
</div>

<div class="u-toggle tomato" data-cc-toggle-group="veg" data-cc-toggle-target-callback=".tomato">
    <h1>🍅</h1>
</div>

<div class="u-toggle banana" data-cc-toggle-group="fruit" data-cc-toggle-target-callback=".banana">
    <h1>🍌</h1>
</div>

<div class="u-toggle apple" data-cc-toggle-group="fruit" data-cc-toggle-target-callback=".apple">
    <h1>🍎</h1>
</div>

Grouped Toggles

🏴‍☠️

Show Pirate

Hide Pirate 

<div class="u-toggle" id="full-description">
    <h1>🏴‍☠️</h1>
</div>

<p class="u-toggle is-active" id="full-description-show" data-cc-toggle-group="full-description-buttons">
    <a href="#" class="is-active" data-cc-toggle-target="#full-description, #full-description-hide" data-cc-toggle-action="toggle">Show Pirate</a>
</p>

<p class="u-toggle" id="full-description-hide" data-cc-toggle-group="full-description-buttons">
    <a href="#" data-cc-toggle-target="#full-description, #full-description-show" data-cc-toggle-action="toggle">Hide Pirate</a>
</p>

Multiple Target

Toggle All Animals

🐴

🐔

🐴

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target=".horse, .chicken">Toggle All Animals</a></p>

<div class="u-toggle horse">
    <h1>🐴</h1>
</div>

<div class="u-toggle chicken">
    <h1>🐔</h1>
</div>

<div class="u-toggle horse">
    <h1>🐴</h1>
</div>

Stateful

Activate Alien

Deactivate Alien

👾

<p><a href="#" data-cc-toggle-action="activate" data-cc-toggle-stateful="false" data-cc-toggle-target=".alien">Activate Alien</a></p>
<p><a href="#" data-cc-toggle-action="deactivate" data-cc-toggle-stateful="false" data-cc-toggle-target=".alien">Deactivate Alien</a></p>


<div class="u-toggle alien">
    <h1>👾</h1>
</div>

Tooltip

Boo

👻

<p><a href="#" data-cc-toggle-trigger-activate="mouseenter" data-cc-toggle-trigger-deactivate="mouseleave" data-cc-toggle-target=".ghost">Boo</a></p>

<div class="u-toggle ghost">
    <h1>👻</h1>
</div>