NEUBRUTALISM

Neubrutalism is a bold web design trend inspired by Brutalist architecture. It features raw aesthetics, thick borders, harsh drop shadows, vibrant colors, and unapologetic typography. This anti-minimalist style embraces visual weight and high contrast to create memorable, attention-grabbing interfaces.

Buttons

Click me if you dare

CODE
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>

Card

Content in a box

BRUTALIST

This is a card component with bold borders and shadows. Select this text.

CODE
<div class="neo-card">
  <div class="neo-card-header">...</div>
  <div class="neo-card-body">...</div>
  <div class="neo-card-footer">...</div>
</div>

Form

Input with attitude

CODE
<form class="neo-form">
  <div class="neo-form-group">
    <label class="neo-label">Name</label>
    <input type="text" class="neo-input">
  </div>
</form>

Alerts

Loud and clear messages

Success! Your action was completed.
Warning! Please review your input.
Error! Something went wrong.
CODE
<div class="neo-alert neo-alert-success">
  <div class="neo-alert-icon">...</div>
  <div>Success!</div>
</div>

Badges

Labels with impact

NEWFEATUREDLIMITED
CODE
<span class="neo-badge badge-primary">NEW</span>

Progress Bar

Track with style

65%
CODE
<div class="neo-progress">
  <div class="neo-progress-bar" style="width: 65%;">
    65%
  </div>
</div>

Toggle Switch

On or off, decisively

CODE
<label class="neo-switch">
  <input type="checkbox">
  <span class="switch-slider"></span>
</label>

Tabs

Organize aggressively

Content for Tab 1. Select this text to see the yellow-black selection style.

Content for Tab 2. Try selecting this text too!

Content for Tab 3. All text selections are now yellow-black.

CODE
<div class="neo-tabs"> ... </div>

Modal

In-your-face dialogs

CODE
<button id="openModal">Open</button>
<div class="neo-modal">...</div>

Accordion

Collapsible attitude

SECTION 1

Content for section 1. Select this text to see the new style.

SECTION 2

Content for section 2. Try selecting this text too!

CODE
<div class="neo-accordion"> ... </div>

Pagination

Navigate with boldness

CODE
<div class="neo-pagination"> ... </div>

Tooltip

Helpful hints with style

This is a tooltip!
CODE
<div class="neo-tooltip-container">
  <button>Hover me</button>
  <div class="neo-tooltip">Tooltip!</div>
</div>

Color Palette

Bold colors for bold designs

#000
#FF3366
#00CC99
#FFD23F
CODE
<div class="color-swatch">#000</div>

Dropdown

Select with authority

CODE
<div class="neo-dropdown">
  <div class="neo-dropdown-btn">SELECT</div>
  <div class="neo-dropdown-content">...</div>
</div>

Breadcrumb

Navigate the path

CODE
<nav class="neo-breadcrumb">
  <a class="neo-breadcrumb-item">HOME</a>
  <span class="neo-breadcrumb-separator">/</span>
</nav>

Slider

Slide with precision

Value: 60%
CODE
<div class="neo-slider">
  <div class="neo-slider-fill"></div>
  <div class="neo-slider-thumb"></div>
</div>

Checkbox & Radio

Choose your options

CODE
<label class="neo-checkbox">
  <input type="checkbox">
  <div class="neo-checkbox-box"></div>
</label>

Notification

Alert with style

CODE
<div class="neo-notification">
  <div class="neo-notification-header">...</div>
  <div class="neo-notification-body">...</div>
</div>