Semantic UI Framework

A development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI treats words and classes as exchangeable concepts.

Why Choose Semantic UI?

Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. It uses natural language principles, making the code more readable and easier to understand.

Human-Friendly

Uses natural language for intuitive class names

Comprehensive

3000+ theme variables and 50+ UI components

jQuery Integration

Seamless integration with jQuery for interactive components

Grid System

Key Features:

  • 16-Column Grid - Flexible 16-column responsive grid system
  • Responsive Breakpoints - Mobile, tablet, computer, and large screen support
  • Nesting Support - Complex layouts with nested grids
  • Stackable Grids - Columns stack on mobile devices automatically
  • Column Variations - Wide columns with precise width control

Grid System Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic UI Grid System</title>
  <!-- Semantic UI CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <style>
    .demo-segment {
      background: #2185d0 !important;
      color: white;
      text-align: center;
      padding: 20px !important;
      border: 2px solid white !important;
    }
    .nested-grid {
      margin: 0 !important;
    }
    .nested-segment {
      background: #1a69a4 !important;
      padding: 15px !important;
    }
  </style>
</head>
<body>
  <div class="ui container" style="padding: 20px;">
    <h1 class="ui header center aligned">Semantic UI Grid System</h1>

    <!-- Basic Grid -->
    <div class="ui segment">
      <h2 class="ui header">Basic 16-Column Grid</h2>
      <div class="ui grid">
        <div class="sixteen wide column">
          <div class="ui segment demo-segment">16 Wide</div>
        </div>
      </div>
      <div class="ui grid">
        <div class="eight wide column">
          <div class="ui segment demo-segment">8 Wide</div>
        </div>
        <div class="eight wide column">
          <div class="ui segment demo-segment">8 Wide</div>
        </div>
      </div>
      <div class="ui grid">
        <div class="four wide column">
          <div class="ui segment demo-segment">4 Wide</div>
        </div>
        <div class="four wide column">
          <div class="ui segment demo-segment">4 Wide</div>
        </div>
        <div class="four wide column">
          <div class="ui segment demo-segment">4 Wide</div>
        </div>
        <div class="four wide column">
          <div class="ui segment demo-segment">4 Wide</div>
        </div>
      </div>
    </div>

    <!-- Responsive Grid -->
    <div class="ui segment">
      <h2 class="ui header">Responsive Grid</h2>
      <div class="ui grid">
        <div class="mobile sixteen wide tablet eight wide computer four wide column">
          <div class="ui segment demo-segment">
            Mobile: 16<br>
            Tablet: 8<br>
            Computer: 4
          </div>
        </div>
        <div class="mobile sixteen wide tablet eight wide computer four wide column">
          <div class="ui segment demo-segment">Responsive Column</div>
        </div>
        <div class="mobile sixteen wide tablet eight wide computer four wide column">
          <div class="ui segment demo-segment">Adapts to Screen</div>
        </div>
        <div class="mobile sixteen wide tablet eight wide computer four wide column">
          <div class="ui segment demo-segment">Mobile First</div>
        </div>
      </div>
    </div>

    <!-- Column Variations -->
    <div class="ui segment">
      <h2 class="ui header">Column Variations</h2>
      <div class="ui grid">
        <div class="two wide column">
          <div class="ui segment demo-segment">2 Wide</div>
        </div>
        <div class="fourteen wide column">
          <div class="ui segment demo-segment">14 Wide</div>
        </div>
      </div>
      <div class="ui grid">
        <div class="three wide column">
          <div class="ui segment demo-segment">3 Wide</div>
        </div>
        <div class="ten wide column">
          <div class="ui segment demo-segment">10 Wide</div>
        </div>
        <div class="three wide column">
          <div class="ui segment demo-segment">3 Wide</div>
        </div>
      </div>
    </div>

    <!-- Nested Grid -->
    <div class="ui segment">
      <h2 class="ui header">Nested Grid</h2>
      <div class="ui grid">
        <div class="ten wide column">
          <div class="ui segment demo-segment">
            Parent 10 Wide
            <div class="ui grid nested-grid">
              <div class="eight wide column">
                <div class="ui segment nested-segment">Nested 8</div>
              </div>
              <div class="eight wide column">
                <div class="ui segment nested-segment">Nested 8</div>
              </div>
            </div>
          </div>
        </div>
        <div class="six wide column">
          <div class="ui segment demo-segment">Parent 6 Wide</div>
        </div>
      </div>
    </div>

    <!-- Stackable Grid -->
    <div class="ui segment">
      <h2 class="ui header">Stackable Grid</h2>
      <div class="ui stackable three column grid">
        <div class="column">
          <div class="ui segment demo-segment">Stackable Column</div>
        </div>
        <div class="column">
          <div class="ui segment demo-segment">Stackable Column</div>
        </div>
        <div class="column">
          <div class="ui segment demo-segment">Stackable Column</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Semantic UI JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

UI Elements

Element Library:

ButtonsHeadersDividersListsIconsLabelsImagesLoaders

UI Elements Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic UI Elements</title>
  <!-- Semantic UI CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <style>
    .demo-container {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="ui container" style="padding: 20px;">
    <h1 class="ui header center aligned">Semantic UI Elements</h1>

    <!-- Buttons -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Buttons</h2>
      <div class="ui buttons">
        <button class="ui button">Normal</button>
        <button class="ui primary button">Primary</button>
        <button class="ui secondary button">Secondary</button>
        <button class="ui positive button">Positive</button>
        <button class="ui negative button">Negative</button>
      </div>
      <div class="ui buttons" style="margin-top: 10px;">
        <button class="ui basic button">Basic</button>
        <button class="ui basic primary button">Basic Primary</button>
        <button class="ui basic secondary button">Basic Secondary</button>
      </div>
      <div class="ui buttons" style="margin-top: 10px;">
        <button class="ui icon button">
          <i class="cloud icon"></i>
        </button>
        <button class="ui labeled icon button">
          <i class="pause icon"></i>
          Pause
        </button>
        <button class="ui right labeled icon button">
          <i class="right arrow icon"></i>
          Next
        </button>
      </div>
      <div class="ui buttons" style="margin-top: 10px;">
        <button class="ui mini button">Mini</button>
        <button class="ui tiny button">Tiny</button>
        <button class="ui small button">Small</button>
        <button class="ui large button">Large</button>
        <button class="ui big button">Big</button>
        <button class="ui huge button">Huge</button>
        <button class="ui massive button">Massive</button>
      </div>
    </div>

    <!-- Headers -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Headers</h2>
      <h1 class="ui header">First Header</h1>
      <h2 class="ui header">Second Header</h2>
      <h3 class="ui header">Third Header</h3>
      <h4 class="ui header">Fourth Header</h4>
      <h5 class="ui header">Fifth Header</h5>
      
      <div class="ui divider"></div>
      
      <h1 class="ui icon header">
        <i class="settings icon"></i>
        <div class="content">
          Account Settings
          <div class="sub header">Manage your account settings and set email preferences</div>
        </div>
      </h1>
    </div>

    <!-- Dividers -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Dividers</h2>
      <div class="ui divider"></div>
      <div class="ui horizontal divider">
        <i class="tag icon"></i>
        Description
      </div>
      <div class="ui horizontal divider">Or</div>
      <div class="ui vertical divider">And</div>
    </div>

    <!-- Lists -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Lists</h2>
      <div class="ui three column grid">
        <div class="column">
          <div class="ui list">
            <div class="item">
              <i class="users icon"></i>
              <div class="content">Semantic UI</div>
            </div>
            <div class="item">
              <i class="marker icon"></i>
              <div class="content">New York, NY</div>
            </div>
            <div class="item">
              <i class="mail icon"></i>
              <div class="content">
                <a href="mailto:jack@semantic-ui.com">jack@semantic-ui.com</a>
              </div>
            </div>
            <div class="item">
              <i class="linkify icon"></i>
              <div class="content">
                <a href="http://www.semantic-ui.com">semantic-ui.com</a>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui bulleted list">
            <div class="item">Getting Started</div>
            <div class="item">Introduction</div>
            <div class="item">
              Languages
              <div class="list">
                <div class="item">HTML</div>
                <div class="item">Javascript</div>
                <div class="item">CSS</div>
              </div>
            </div>
            <div class="item">Review</div>
          </div>
        </div>
        <div class="column">
          <div class="ui ordered list">
            <div class="item">Signing Up</div>
            <div class="item">User Benefits</div>
            <div class="item">User Types</div>
            <div class="item">Cancellation</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Icons -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Icons</h2>
      <div class="ui huge icons">
        <i class="home icon"></i>
        <i class="user icon"></i>
        <i class="search icon"></i>
        <i class="settings icon"></i>
        <i class="heart icon"></i>
        <i class="star icon"></i>
        <i class="bookmark icon"></i>
        <i class="bell icon"></i>
        <i class="calendar icon"></i>
        <i class="envelope icon"></i>
      </div>
      <div class="ui divider"></div>
      <div class="ui huge icons">
        <i class="circular home icon"></i>
        <i class="circular teal user icon"></i>
        <i class="circular inverted search icon"></i>
        <i class="circular inverted red heart icon"></i>
        <i class="circular inverted blue star icon"></i>
      </div>
    </div>

    <!-- Labels -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Labels</h2>
      <div class="ui label">
        <i class="mail icon"></i> 23
      </div>
      <div class="ui image label">
        <img src="https://semantic-ui.com/images/avatar/small/veronika.jpg">
        Veronika
      </div>
      <div class="ui tag label">New</div>
      <div class="ui ribbon label">Ribbon Label</div>
      <div class="ui horizontal segments">
        <div class="ui segment">
          <div class="ui top attached label">Top Attached</div>
          <p>Content</p>
        </div>
        <div class="ui segment">
          <div class="ui bottom attached label">Bottom Attached</div>
          <p>Content</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Semantic UI JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

Collections

Collection Features:

  • Forms - Beautiful, responsive forms with validation
  • Breadcrumbs - Navigation breadcrumbs for site hierarchy
  • Menus - Various menu styles including vertical and tabular
  • Messages - Different types of message displays
  • Tables - Responsive tables with various styles
  • Grids - Advanced grid layouts and configurations

Collections Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic UI Collections</title>
  <!-- Semantic UI CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <style>
    .demo-container {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="ui container" style="padding: 20px;">
    <h1 class="ui header center aligned">Semantic UI Collections</h1>

    <!-- Breadcrumb -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Breadcrumb</h2>
      <div class="ui breadcrumb">
        <a class="section">Home</a>
        <div class="divider"> / </div>
        <a class="section">Store</a>
        <div class="divider"> / </div>
        <div class="active section">T-Shirt</div>
      </div>
    </div>

    <!-- Form -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Forms</h2>
      <form class="ui form">
        <div class="two fields">
          <div class="field">
            <label>First Name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>Last Name</label>
            <input type="text" placeholder="Last Name">
          </div>
        </div>
        <div class="field">
          <label>Email</label>
          <input type="email" placeholder="Email">
        </div>
        <div class="field">
          <label>Message</label>
          <textarea placeholder="Enter your message"></textarea>
        </div>
        <div class="inline fields">
          <label for="fruit">Select your favorite fruit:</label>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" checked="checked">
              <label>Apples</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit">
              <label>Oranges</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit">
              <label>Pears</label>
            </div>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox">
            <label>I agree to the Terms and Conditions</label>
          </div>
        </div>
        <button class="ui button primary" type="submit">Submit</button>
        <button class="ui button" type="reset">Reset</button>
      </form>
    </div>

    <!-- Menu -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Menu</h2>
      <div class="ui three item menu">
        <a class="active item">Editorials</a>
        <a class="item">Reviews</a>
        <a class="item">Upcoming Events</a>
      </div>
      
      <div class="ui vertical menu">
        <div class="item">
          <div class="header">Products</div>
          <div class="menu">
            <a class="item">Enterprise</a>
            <a class="item">Consumer</a>
          </div>
        </div>
        <div class="item">
          <div class="header">CMS Solutions</div>
          <div class="menu">
            <a class="item">Rails</a>
            <a class="item">Python</a>
            <a class="item">PHP</a>
          </div>
        </div>
      </div>

      <div class="ui tabular menu">
        <a class="active item">Bio</a>
        <a class="item">Photos</a>
        <a class="item">Companies</a>
        <a class="item">Links</a>
      </div>
    </div>

    <!-- Message -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Messages</h2>
      <div class="ui message">
        <div class="header">
          Changes in Service
        </div>
        <p>We just updated our privacy policy here to better service our customers.</p>
      </div>
      
      <div class="ui success message">
        <i class="close icon"></i>
        <div class="header">
          Your user registration was successful.
        </div>
        <p>You may now log-in with the username you have chosen</p>
      </div>
      
      <div class="ui warning message">
        <div class="header">
          You must register before you can do that!
        </div>
        Visit our registration page, then try again
      </div>
      
      <div class="ui error message">
        <div class="header">
          There was some errors with your submission
        </div>
        <ul class="list">
          <li>You must include both a upper and lower case letters in your password.</li>
          <li>You need to select your home country.</li>
        </ul>
      </div>
    </div>

    <!-- Table -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Tables</h2>
      <table class="ui celled table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Notes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Approved</td>
            <td>None</td>
          </tr>
          <tr class="positive">
            <td>Jamie</td>
            <td>Approved</td>
            <td>Requires call</td>
          </tr>
          <tr class="negative">
            <td>Jill</td>
            <td>Denied</td>
            <td>None</td>
          </tr>
        </tbody>
      </table>

      <table class="ui striped table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>12</td>
          </tr>
          <tr>
            <td>Mouse</td>
            <td>$25</td>
            <td>45</td>
          </tr>
          <tr>
            <td>Keyboard</td>
            <td>$75</td>
            <td>23</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Semantic UI JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script>
    $('.ui.checkbox').checkbox();
    $('.message .close').on('click', function() {
      $(this).closest('.message').transition('fade');
    });
  </script>
</body>
</html>

Views

View Components:

  • Cards - Flexible card components for content display
  • Comments - Threaded comment systems
  • Feed - Social media style feed layouts
  • Items - View items for lists and collections
  • Statistics - Statistical data displays
  • Advertisements - Ad units and promotional content

Views Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic UI Views</title>
  <!-- Semantic UI CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <style>
    .demo-container {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="ui container" style="padding: 20px;">
    <h1 class="ui header center aligned">Semantic UI Views</h1>

    <!-- Cards -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Cards</h2>
      <div class="ui three cards">
        <div class="card">
          <div class="content">
            <div class="header">Elliot Fu</div>
            <div class="meta">Friend</div>
            <div class="description">
              Elliot Fu is a film-maker from New York.
            </div>
          </div>
          <div class="extra content">
            <span class="left floated like">
              <i class="like icon"></i>
              Like
            </span>
            <span class="right floated star">
              <i class="star icon"></i>
              Favorite
            </span>
          </div>
        </div>
        
        <div class="card">
          <div class="content">
            <img class="right floated mini ui image" src="https://semantic-ui.com/images/avatar/large/elliot.jpg">
            <div class="header">Jenny Hess</div>
            <div class="meta">New Member</div>
            <div class="description">
              Jenny wants to add you to the group <b>best friends</b>
            </div>
          </div>
          <div class="extra content">
            <div class="ui two buttons">
              <div class="ui basic green button">Approve</div>
              <div class="ui basic red button">Decline</div>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="image">
            <img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
          </div>
          <div class="content">
            <div class="header">Matt Giampietro</div>
            <div class="meta">
              <span class="date">Joined in 2013</span>
            </div>
            <div class="description">
              Matthew is an interior designer living in New York.
            </div>
          </div>
          <div class="extra content">
            <span>
              <i class="user icon"></i>
              22 Friends
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Comments -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Comments</h2>
      <div class="ui comments">
        <h3 class="ui dividing header">Comments</h3>
        <div class="comment">
          <a class="avatar">
            <img src="https://semantic-ui.com/images/avatar/small/matt.jpg">
          </a>
          <div class="content">
            <a class="author">Matt</a>
            <div class="metadata">
              <span class="date">Today at 5:42PM</span>
            </div>
            <div class="text">
              How artistic!
            </div>
            <div class="actions">
              <a class="reply">Reply</a>
            </div>
          </div>
        </div>
        <div class="comment">
          <a class="avatar">
            <img src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
          </a>
          <div class="content">
            <a class="author">Elliot Fu</a>
            <div class="metadata">
              <span class="date">Yesterday at 12:30AM</span>
            </div>
            <div class="text">
              <p>This has been very useful for my research. Thanks as well!</p>
            </div>
            <div class="actions">
              <a class="reply">Reply</a>
            </div>
          </div>
          <div class="comments">
            <div class="comment">
              <a class="avatar">
                <img src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
              </a>
              <div class="content">
                <a class="author">Jenny Hess</a>
                <div class="metadata">
                  <span class="date">Just now</span>
                </div>
                <div class="text">
                  Elliot you are always so right :)
                </div>
                <div class="actions">
                  <a class="reply">Reply</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="comment">
          <a class="avatar">
            <img src="https://semantic-ui.com/images/avatar/small/joe.jpg">
          </a>
          <div class="content">
            <a class="author">Joe Henderson</a>
            <div class="metadata">
              <span class="date">5 days ago</span>
            </div>
            <div class="text">
              Dude, this is awesome. Thanks so much
            </div>
            <div class="actions">
              <a class="reply">Reply</a>
            </div>
          </div>
        </div>
        <form class="ui reply form">
          <div class="field">
            <textarea></textarea>
          </div>
          <div class="ui primary submit labeled icon button">
            <i class="icon edit"></i> Add Reply
          </div>
        </form>
      </div>
    </div>

    <!-- Feed -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Feed</h2>
      <div class="ui feed">
        <div class="event">
          <div class="label">
            <img src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
          </div>
          <div class="content">
            <div class="summary">
              <a class="user">Elliot Fu</a> added you as a friend
              <div class="date">1 Hour Ago</div>
            </div>
            <div class="meta">
              <a class="like">
                <i class="like icon"></i> 4 Likes
              </a>
            </div>
          </div>
        </div>
        <div class="event">
          <div class="label">
            <img src="https://semantic-ui.com/images/avatar/small/helen.jpg">
          </div>
          <div class="content">
            <div class="summary">
              <a>Helen Troy</a> added <a>2 new illustrations</a>
              <div class="date">4 days ago</div>
            </div>
            <div class="extra images">
              <a><img src="https://semantic-ui.com/images/wireframe/image.png"></a>
              <a><img src="https://semantic-ui.com/images/wireframe/image.png"></a>
            </div>
            <div class="meta">
              <a class="like">
                <i class="like icon"></i> 1 Like
              </a>
            </div>
          </div>
        </div>
        <div class="event">
          <div class="label">
            <img src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
          </div>
          <div class="content">
            <div class="summary">
              <a class="user">Jenny Hess</a> added you as a friend
              <div class="date">2 Days Ago</div>
            </div>
            <div class="meta">
              <a class="like">
                <i class="like icon"></i> 8 Likes
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Items -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Items</h2>
      <div class="ui items">
        <div class="item">
          <div class="ui small image">
            <img src="https://semantic-ui.com/images/wireframe/image.png">
          </div>
          <div class="content">
            <a class="header">Header</a>
            <div class="meta">
              <span>Description</span>
            </div>
            <div class="description">
              <p></p>
            </div>
            <div class="extra">
              Additional Details
            </div>
          </div>
        </div>
        <div class="item">
          <div class="ui small image">
            <img src="https://semantic-ui.com/images/wireframe/image.png">
          </div>
          <div class="content">
            <a class="header">Date Header</a>
            <div class="meta">
              <span class="cinema">Union Square 14</span>
            </div>
            <div class="description">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="extra">
              <div class="ui label">IMAX</div>
              <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Statistic -->
    <div class="ui segment demo-container">
      <h2 class="ui header">Statistics</h2>
      <div class="ui statistics">
        <div class="statistic">
          <div class="value">22</div>
          <div class="label">Saves</div>
        </div>
        <div class="statistic">
          <div class="text value">
            Three<br>
            Thousand
          </div>
          <div class="label">Signups</div>
        </div>
        <div class="statistic">
          <div class="value">
            <i class="plane icon"></i> 5
          </div>
          <div class="label">Flights</div>
        </div>
        <div class="statistic">
          <div class="value">
            <img src="https://semantic-ui.com/images/avatar/small/joe.jpg" class="ui circular inline image">
            42
          </div>
          <div class="label">Team Members</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Semantic UI JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>
</html>

Quick Start Guide

CDN Method (Easiest)

<!-- Semantic UI CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- Semantic UI JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Package Manager (npm)

# Install via npm
npm install semantic-ui

# Or install specific packages
npm install semantic-ui-css semantic-ui-react

# Import in your JavaScript
import 'semantic-ui-css/semantic.min.css';

# For React projects
import { Button, Header } from 'semantic-ui-react';

Best Practices

✅ Do This

  • Use semantic class names - Leverage human-readable classes
  • Follow the container pattern - Use ui container for proper layout
  • Use responsive utilities - Leverage mobile, tablet, computer classes
  • Initialize JavaScript components - Use jQuery for interactive elements
  • Follow the theming system - Use SASS variables for customization

❌ Avoid This

  • Forgetting jQuery - Many components require jQuery initialization
  • Overriding core styles - Use theme variables instead
  • Ignoring responsive classes - Always consider mobile devices
  • Mixing frameworks - Stick to Semantic UI's methodology
  • Complex nesting - Keep HTML structure clean and semantic

Ready to Build with Semantic UI?

Start creating beautiful, semantic websites with this human-friendly CSS framework that makes your code readable and maintainable.

< PreviousNext >