💫 pivot.css

Alert styles will be applied on any element with a role="alert".

Four types of alerts can be displayed :

• class="info"
• class="success"
• class="warning"
• class="danger"

Although optional, alerts can own a header, a footer, and a button class="close".

<div id="alert-info" class="info" role="alert">
	<header>
		<button class="close" role="button" aria-controls="alert-info"></button>
		ℹ️ alert-info
	</header>
	<p role="alertdialog"> ... </p>
	<footer role="contentinfo">Lorem ipsum</footer>
</div>

Attribute p role="alertdialog" has no effect but is recommended for accessibility.

Four types of buttons can be displayed :

• class="info"
• class="success"
• class="warning"
• class="danger"

<button class="success">
	✅ This is a <strong>success</strong> button
</button>

Buttons can own a disabled state.

Toolbars are used to group buttons in a compact way. Texts, links, buttons, emojis, fonticons and inline svg inside toolbars will align vertically.

A toolbar must own a role="toolbar" attribute to be used as a toolbar. All items contained in the toolbar must own role="menuitem" attribute to be displayed properly.

<ul role="toolbar">
	<li role="menuitem">
		<button>⭐</button>
	</li>
	<li role="menuitem">
		<a role="button">👍</a>
	</li>
	<li role="menuitem">
		<a href="https://tangoman.io">♥️</a>
	</li>
	<li role="menuitem">
		<button>T</button>
	</li>
</ul>

Menubars are used to group links in a collapsible menu.

Collapsible menubar are built with an element with role="menu" as a wrapper and an element with role="menubar" as direct child. All items contained in the menubar must own role="menuitem" attribute to be displayed properly.

<ul role="menubar">
	<li role="menuitem">
		<span class="icon icon-date"></span>
		<small>2025-01-01</small>
	</li>
	<li role="menuitem">
		<span class="icon icon-time"></span>
		<small>12:30</small>
	</li>
</ul>

A element must own a data-toast=" ... " attribute to display a toast message.

Four types of toasts can be displayed :

• data-toast-type="info"
• data-toast-type="success"
• data-toast-type="warning"
• data-toast-type="danger"

Toasts can also own the following attributes :

• data-toast-icon="👋"
• data-toast-title="Hello World !
• data-toast-fonticon="icon icon-search"
• data-toast-footer="lorem ipsum"

Duration : Toasts can be displayed for a specific duration (in milliseconds) :

• data-toast-duration="3000" (duration is defined in miliseconds)
• If set to data-toast-duration="0", toast stays up until closed by user

Position : Toasts can be displayed in four different positions :

• data-toast-position="top"
• data-toast-position="right"
• data-toast-position="bottom"
• data-toast-position="left"

Test :

1. Click on a button to display a toast.
2. Click on the button to hide the toast.
3. Toasts are automatically hidden after 5 seconds.

ℹ️ Click here to display an info ⬆️ ↖️ ⬇️

✅ Click here to display a success message ⬆️ ↖️ ⬇️

⚠️ Click here to display a warning message ⬆️ ↖️ ⬇️

🚨 Click here to display a danger message ⬆️ ↖️ ⬇️

Click here to display a loading message ⬆️ ↖️ ⬇️

<button class="success"
	data-toast="This is a success message."
	data-toast-type="success"
>
	✅ Click here to display a <strong>success</strong> message
</button>

Tabs are used to display content in a compact way. They can be used to group content in a tabbed interface.

• Panel 1
• Panel 2
• Panel 3

• Each tab requires a role="tab" attribute.
• And a aria-controls attribute that references the id of the corresponding panel.
• Each panel requires a role="tabpanel" attribute.
• The first tab is selected by default.

<ul class="tabs" role="tablist">
	<li id="tab-1" role="tab" aria-controls="panel-1">
		<button class="close" role="button"></button>
		Panel 1
	</li>
	<li> ... </li>
</ul>

Tabs can own a disabled state.

<article id="panel-1" role="tabpanel" aria-labelledby="tab-1">
	<header>
		<h3>Panel 1</h3>
	</header>
	<p> ... </p>
</article>

Attribute aria-labelledby=" ... " that references the id of the corresponding tab is optional but recommended for accessibility.

pivot.css provides a set of utility classes to help you build a responsive layout. You can use the following classes to create a flexbox layout :

• .flex spaces child elements evenly, with the first at the start and the last at the end.
• .flex-right enables Flexbox but keeps the container inline and aligns child elements to the right.

footer from articles displayed in a grid will align at the bottom of each parent article automatically.

pivot.css provides a set of utility classes to help reuse picocss icons in your HTML by using the class="icon icon-[icon-name]" class in a <span> or <i> element.

Availlable icons are the following :