Skip to content

design

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

design

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

Components Documentation - Sstudiosdev-lib

This repository contains a set of CSS components for building user interfaces. Below is a list of components along with their descriptions and example code.

.container

A container class for wrapping the content with a maximum width and centered alignment.

Example:

<div class="container">
    <!-- Your content goes here -->
</div>

.btn

A button component with basic styling for interactive elements.

Example:

<button class="btn">Click me</button>

.card

A card component with a subtle box-shadow effect for displaying content.

Example:

<div class="card">
    <!-- Card content -->
</div>

.card-header

Header section for the card component.

Example:

<div class="card">
    <div class="card-header">
        <!-- Card header content -->
    </div>
    <div class="card-body">
        <!-- Card body content -->
    </div>
</div>

.card-body

Body section for the card component.

Example:

<div class="card">
    <div class="card-header">
        <!-- Card header content -->
    </div>
    <div class="card-body">
        <!-- Card body content -->
    </div>
</div>

.form-group

Grouping class for form elements.

Example:

<div class="form-group">
    <!-- Form elements -->
</div>

.form-label

Label class for form inputs.

Example:

<label class="form-label" for="example-input">Label:</label>

.form-input

Styling for form inputs.

Example:

<input type="text" class="form-input" id="example-input" placeholder="Enter text">

.h1

Styling for heading level 1.

Example:

<h1 class="h1">Heading 1</h1>

.navbar

Navigation bar component with basic styling.

Example:

<nav class="navbar">
    <div class="container">
        <!-- Navbar content -->
    </div>
</nav>

.navbar-brand

Styling for the navigation bar brand/logo.

Example:

<a href="#" class="navbar-brand">Brand</a>

.navbar-menu

Styling for the navigation bar menu items.

Example:

<ul class="navbar-menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
</ul>

.alert

Alert component for displaying messages to the user.

Example:

<div class="alert">
    <!-- Alert content -->
</div>

.alert-success

Success variant of the alert component.

Example:

<div class="alert alert-success">
    <!-- Success alert content -->
</div>

.alert-warning

Warning variant of the alert component.

Example:

<div class="alert alert-warning">
    <!-- Warning alert content -->
</div>

.alert-error

Error variant of the alert component.

Example:

<div class="alert alert-error">
    <!-- Error alert content -->
</div>

.progress-bar

Styling for a progress bar.

Example:

<div class="progress-bar">
    <div class="progress-bar-fill" style="width: 50%;"></div>
</div>

.progress-bar-fill

Fill class for the progress bar.

Example:

NONE 😒

.tab

Tab component for displaying tabbed content.

Example:

<div class="tab">
    <button class="tablinks">Tab 1</button>
    <button class="tablinks">Tab 2</button>
</div>

.tabcontent

Content section for tabs.

Example:

<div class="tabcontent">
    <!-- Tab content -->
</div>

.custom-list

Custom list styling.

Example:

<ul class="custom-list">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>

.tags-container

Container for displaying tags.

Example:

<div class="tags-container">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
</div>

.tag

Styling for individual tags.

Example:

<span class="tag">Tag</span>

flip-card

Sure, a flip-card is basically an online card that displays information on both sides and allows the user to "flip" it to see the other side with more details or content. It's an interactive and engaging way to present information on websites and applications.

Example:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      Front Content
    </div>
    <div class="flip-card-back">
      Back Content
    </div>
  </div>
</div>