Skip to main content

The main navigation above is auto-justified using the .nav-justified body class.

Slider

JavaScript Components

Talk about .nav-justified .nav-float .autosize-header note about justified nav being even and not taking into account length of text.

Lil' Slider

Embed and Background editions?

Tabs

Apply a .tabs class to an ordered or unordered list (or the list's container) to create a slideshow with tabbed navigation. Options include .tabs-classic (applies a classic "tabbed" look), .tabs-numbered (prefixes tab labels with numbers), .tabs-numbers-only (tab labels are numbered with no visible text label (though text is still present behind the scenes for screen readers)), .tabs-mobile-expand (on small screens, all slides are visible, with no tab navigation), and .tabs-mobile-accordion (on small screens, all slides are hidden with tabs stacked vertically and behaving in an "accordion" fashion).

Basic Tabs

  • Maddie Kat

    Madeleine

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

  • Devon Kat

    Devon

    Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

  • Maddie and Devon

    Combopak

    Donec sed odio dui. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Classic Tabs, Numbers Only

  • Maddie Kat

    Madeleine

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

  • Devon Kat

    Devon

    Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

  • Maddie and Devon

    Combopak

    Donec sed odio dui. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tooltips

A student walking on campus in the winter

A JavaScript-based tooltip system unifies behavior across browsers and allows for faster response. Toolips can be added to any element (typically links) by adding the .tooltip class and including a title attribute to define the tooltip text. The links that appear in the remainder of this paragraph are set up to display custom tooltips, as is the image of a student. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam fermentum lacus, ut sagittis dui porttitor vitae. Fusce id tellus libero. In vitae libero sit amet velit lobortis congue in eu velit. Mauris venenatis, nisi vitae ultricies semper, leo dolor porta risus, vitae molestie magna sapien consectetur adipiscing elit this link is long enough that it will most likely wrap to multiple lines, allowing us to test complex bounds detection nibh.

Modal Popups

Maddie, ID, iframe

Expander

Click the items below to learn more. | expand all

Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi neque orci, vulputate ac commodo ac, ullamcorper quis nisi. Fusce non nunc non justo blandit dapibus et at enim. Etiam consectetur velit eget augue convallis semper. Aenean volutpat nisl non tortor convallis porta mollis dui condimentum. Suspendisse ornare orci quis libero interdum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin tincidunt ipsum, a aliquet mi dictum nec. Aliquam consectetur nunc venenatis nulla bibendum ut congue orci adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Title 2 (Includes Nested Items)

Morbi aliquam fermentum lacus, ut sagittis dui:

Nested 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested 2
Etiam consectetur velit eget augue convallis semper.
Nested 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Title 3
Ut tristique commodo lobortis. Sed consectetur egestas auctor. Curabitur enim massa, pellentesque vel cursus quis, facilisis auctor libero. Pellentesque eget lobortis justo. Nulla risus justo, lacinia et pretium quis, pretium nec purus. Proin sed lacus est. In vel felis ipsum, nec tincidunt nibh.
Title 4
Sed ac nulla enim. Donec congue dui at velit consectetur fermentum. Donec quis neque ac massa ultrices placerat. Maecenas arcu felis, ullamcorper eu posuere ac, dictum vel justo. Nulla sollicitudin pretium congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam luctus lacus neque, non pretium nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Localist Events

Main Listing

Archive Mode?

Main Listing

Article Footer
This content appears at the bottom of the main article. It could hold footnotes, references, author info, or other metadata.