Semanticus CSS

Appearance

Starter HTML template ​


live preview
editable html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.css">
</head>

<body class="content-grid">
  <header>
    <nav>
      <a href="#" class="fs-3"><strong>Acme Corp</strong></a>
  
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#" role="button" class="contrast">Log In</a></li>
      </ul>
    </nav>
  </header>
  
  <main class="py-d mb-3">
    <hgroup>
      <h1>Welcome to Semanticus CSS</h1>
      <p>ARIA-centric, semantic HTML enhanced by atomic utilities.</p>
    </hgroup>
  
    <button>Get Started</button>
  </main>
  
  <footer class="full-width pane secondary subtle">
    <nav>
      <p>Acme Corp &copy; 2026</p>
      <a href="#">Contact Us</a>
    </nav>
  </footer>
</body>
</html>