Skip to content

Utility elements and classes

Luke Harris edited this page May 16, 2023 · 3 revisions

Current <nav> item

Add the current class to the a element to highlight it as the active navigation item.

<nav>
  <ul>
    <li><a class="current" href="#">Nav item</a></li>
  </ul>
</nav>

Button

Add the button class to the a element to make it look like a button instead of a link.

<a class="button" href="#">Click me</a>

Notice

Add the notice class to the p element to create a notice box, similar to the one on the Simple.css homepage.

<p class="notice">Important information</p>

Horizontal scroller

Wrap elements with a figure element to prevent tables and other fixed-width elements from overflowing their parent container.

<figure>

<table>
...
</table>

</figure>