Skip to main content

​
Button Component

Ready-to-use button component with size and color variants.

Button Base

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

​
Button Sizes

Button Sizes

.btn-sm8px 16px14pxSmall buttons
.btn-lg16px 32px18pxLarge buttons

​
Button Colors

Button Colors

.btn-blue#3b82f6WhitePrimary actions
.btn-green#10b981WhiteSuccess actions
.btn-red#ef4444WhiteDanger actions

​
Button Examples

<button class="btn btn-blue">Primary Button</button>
<button class="btn btn-green btn-lg">Large Success Button</button>
<button class="btn btn-red btn-sm">Small Danger Button</button>

​
Card Component

Flexible card component for content containers.

Card Base

.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
}

​
Card Examples

<div class="card">
  <h3 class="text-xl font-600 mb-4">Card Title</h3>
  <p class="text-gray">Card content goes here.</p>
</div>

<div class="card border border-gray-light">
  <h3 class="text-xl font-600 mb-4">Bordered Card</h3>
  <p class="text-gray">Card with border</p>
</div>

​
Container Component

Centered container with max-width and responsive padding.

Container Base

.cont {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
Reserved Name: The class name is .cont because “container” is a reserved keyword in Elementor.

​
Container Examples

<div class="cont">
  <h1 class="text-3xl font-700 mb-6">Page Title</h1>
  <p class="text-lg text-gray">Centered content with max width</p>
</div>

<div class="cont">
  <div class="flex gap-6 flex-wrap">
    <div class="w-1-3">
      <div class="card p-6">Card 1</div>
    </div>
    <div class="w-1-3">
      <div class="card p-6">Card 2</div>
    </div>
    <div class="w-1-3">
      <div class="card p-6">Card 3</div>
    </div>
  </div>
</div>

​
Component Combinations

​
Button in Card

<div class="card p-6">
  <h3 class="text-xl font-600 mb-4">Card with Button</h3>
  <p class="text-gray mb-4">Card content with action button</p>
  <button class="btn btn-blue">Action</button>
</div>

​
Responsive Card Grid

<div class="cont">
  <div class="flex flex-wrap gap-6">
    <div class="w-full md:w-1-2 lg:w-1-3">
      <div class="card p-6">
        <h3 class="text-xl font-600 mb-4">Card Title</h3>
        <p class="text-gray mb-4">Card content</p>
        <button class="btn btn-blue">Learn More</button>
      </div>
    </div>
  </div>
</div>

Colors

Color utilities for components

Spacing

Padding and margin utilities