Lab | Module Template

Expandables

HEADER Title

Content Here

Make sure to not have object with fixed height or else your layout will be destroyed (empty space on bottom). Fixable by adding "overflow: hidden" on its parent.

Snippet

<section class="expandable slow" id="content-1"> <input id="IDHERE_sys" type="checkbox" class="expandable-control"> <label for="IDHERE_sys" class="expandable-title"> <div class="expandable-title-icon"></div> <p>HEADER Title</p> </label> <div class="expandable-content"> <div> <p>Content Here</p> </div> </div> </section>

Mods

class
.expandable-content--slow
.expandable-content--fast

Tooltips

Usable inline text, click on this Tooltip Tooltip content to expand its content

Snippet

<span class="tooltip" tabindex="0"><span>Tooltip</span> <span class="tooltip-content">Tooltip content</span></span>

Mods

class
.tooltip-content--slow
.tooltip-content--left
.tooltip-content--right
.tooltip-content--small
.tooltip-content--wide

style
--tooltip-position:translateX(NUM)

Avatar Picture

Mobile view does not float, all is centered.

Left

Right

Default

The name is optional. Use float if need to be stacked, be warned it will overlap with other container outside if there's not enough content below it.

Mods

.headshot--float-left
.headshot--float-right
.headshot--pos-first
.headshot--pos-middle

Don't stack default with floating, it's broken as you can see.

--pos-first and middle modifier is used to modify its margin, mainly if it's floating.

Template Wrapper