Savile Home

Utilities

Colors

Text

Class Name HTML Example
.s-text-black 
<div class="s-text-black">Text</div>
Text
.s-text-white 
<div class="s-text-white s-bg-black">Text</div>
Text
.s-text-cyan-400 
<div class="s-text-cyan-400 s-bg-black">Text</div>
Text
.s-text-cyan-500 
<div class="s-text-cyan-500 s-bg-black">Text</div>
Text
.s-text-cyan-600 
<div class="s-text-cyan-600 s-bg-black">Text</div>
Text
.s-text-cyan-700 
<div class="s-text-cyan-700">Text</div>
Text
.s-text-gray-100 
<div class="s-text-gray-100 s-bg-black">Text</div>
Text
.s-text-gray-200 
<div class="s-text-gray-200 s-bg-black">Text</div>
Text
.s-text-gray-300 
<div class="s-text-gray-300 s-bg-black">Text</div>
Text
.s-text-gray-400 
<div class="s-text-gray-400 s-bg-black">Text</div>
Text
.s-text-gray-500 
<div class="s-text-gray-500 s-bg-black">Text</div>
Text
.s-text-gray-600 
<div class="s-text-gray-600">Text</div>
Text
.s-text-gray-700 
<div class="s-text-gray-700">Text</div>
Text
.s-text-gray-800 
<div class="s-text-gray-800">Text</div>
Text
.s-text-red-500 
<div class="s-text-red-500 s-bg-black">Text</div>
Text
.s-text-red-600 
<div class="s-text-red-600">Text</div>
Text
.s-text-red-700 
<div class="s-text-red-700">Text</div>
Text
.s-text-yellow-500 
<div class="s-text-yellow-500 s-bg-black">Text</div>
Text
.s-text-yellow-600 
<div class="s-text-yellow-600 s-bg-black">Text</div>
Text
.s-text-yellow-700 
<div class="s-text-yellow-700 s-bg-black">Text</div>
Text

Background

Class Name HTML Example
.s-bg-black 
<div class="s-bg-black"></div>
.s-bg-white 
<div class="s-bg-white"></div>
.s-bg-cyan-400 
<div class="s-bg-cyan-400"></div>
.s-bg-cyan-500 
<div class="s-bg-cyan-500"></div>
.s-bg-cyan-600 
<div class="s-bg-cyan-600"></div>
.s-bg-cyan-700 
<div class="s-bg-cyan-700"></div>
.s-bg-gray-100 
<div class="s-bg-gray-100"></div>
.s-bg-gray-200 
<div class="s-bg-gray-200"></div>
.s-bg-gray-300 
<div class="s-bg-gray-300"></div>
.s-bg-gray-400 
<div class="s-bg-gray-400"></div>
.s-bg-gray-500 
<div class="s-bg-gray-500"></div>
.s-bg-gray-600 
<div class="s-bg-gray-600"></div>
.s-bg-gray-700 
<div class="s-bg-gray-700"></div>
.s-bg-gray-800 
<div class="s-bg-gray-800"></div>
.s-bg-red-500 
<div class="s-bg-red-500"></div>
.s-bg-red-600 
<div class="s-bg-red-600"></div>
.s-bg-red-700 
<div class="s-bg-red-700"></div>
.s-bg-yellow-500 
<div class="s-bg-yellow-500"></div>
.s-bg-yellow-600 
<div class="s-bg-yellow-600"></div>
.s-bg-yellow-700 
<div class="s-bg-yellow-700"></div>

Border

Class Name HTML Example
.s-border-black 
<div class="s-border-black"></div>
.s-border-white 
<div class="s-border-white"></div>
.s-border-cyan-400 
<div class="s-border-cyan-400"></div>
.s-border-cyan-500 
<div class="s-border-cyan-500"></div>
.s-border-cyan-600 
<div class="s-border-cyan-600"></div>
.s-border-cyan-700 
<div class="s-border-cyan-700"></div>
.s-border-gray-100 
<div class="s-border-gray-100"></div>
.s-border-gray-200 
<div class="s-border-gray-200"></div>
.s-border-gray-300 
<div class="s-border-gray-300"></div>
.s-border-gray-400 
<div class="s-border-gray-400"></div>
.s-border-gray-500 
<div class="s-border-gray-500"></div>
.s-border-gray-600 
<div class="s-border-gray-600"></div>
.s-border-gray-700 
<div class="s-border-gray-700"></div>
.s-border-gray-800 
<div class="s-border-gray-800"></div>
.s-border-red-500 
<div class="s-border-red-500"></div>
.s-border-red-600 
<div class="s-border-red-600"></div>
.s-border-red-700 
<div class="s-border-red-700"></div>
.s-border-yellow-500 
<div class="s-border-yellow-500"></div>
.s-border-yellow-600 
<div class="s-border-yellow-600"></div>
.s-border-yellow-700 
<div class="s-border-yellow-700"></div>
.s-border-transparent 
<div class="s-border-transparent"></div>

Font Weight

Class Name HTML Example
.s-font-ultra-light 
<span class="s-font-ultra-light">Example text</span>
Example text
.s-font-light 
<span class="s-font-light">Example text</span>
Example text
.s-font-normal 
<span class="s-font-normal">Example text</span>
Example text
.s-font-bold 
<span class="s-font-bold">Example text</span>
Example text
.s-font-heavy 
<span class="s-font-heavy">Example text</span>
Example text

Font Size

Class Name HTML Example
.s-font-xxs 
<span class="s-font-xxs">Example</span>
Example
.s-font-xs 
<span class="s-font-xs">Example</span>
Example
.s-font-sm 
<span class="s-font-sm">Example</span>
Example
.s-font-md 
<span class="s-font-md">Example</span>
Example
.s-font-lg 
<span class="s-font-lg">Example</span>
Example
.s-font-xl 
<span class="s-font-xl">Example</span>
Example
.s-font-xxl 
<span class="s-font-xxl">Example</span>
Example

Text Align

Class Name HTML Example
.s-text-start 
<p class="s-text-start">Example text</p>

Example text

.s-text-center 
<p class="s-text-center">Example text</p>

Example text

.s-text-end 
<p class="s-text-end">Example text</p>

Example text

Text Decoration

Class Name HTML Example
.s-text-decor-line-through 
<span class="s-text-decor-line-through">Example text</span>
Example text
.s-text-decor-none 
<span class="s-text-decor-none">Example text</span>
Example text
.s-text-decor-underline 
<span class="s-text-decor-underline">Example text</span>
Example text

Text Transform

Class Name HTML Example
.s-text-capitalize 
<span class="s-text-capitalize">exaMPle teXT</span>
exaMPle teXT
.s-text-lowercase 
<span class="s-text-lowercase">exaMPle teXT</span>
exaMPle teXT
.s-text-uppercase 
<span class="s-text-uppercase">exaMPle teXT</span>
exaMPle teXT

Margins

Class Name HTML Example
.s-m-0 
<div class="s-m-0">
  <code>s-m-0</code>
</div>
s-m-0
.s-mx-0 
<div class="s-mx-0">
  <code>s-mx-0</code>
</div>
s-mx-0
.s-my-0 
<div class="s-my-0">
  <code>s-my-0</code>
</div>
s-my-0
.s-mt-0 
<div class="s-mt-0">
  <code>s-mt-0</code>
</div>
s-mt-0
.s-mr-0 
<div class="s-mr-0">
  <code>s-mr-0</code>
</div>
s-mr-0
.s-mb-0 
<div class="s-mb-0">
  <code>s-mb-0</code>
</div>
s-mb-0
.s-ml-0 
<div class="s-ml-0">
  <code>s-ml-0</code>
</div>
s-ml-0
.s-m-1 
<div class="s-m-1">
  <code>s-m-1</code>
</div>
s-m-1
.s-mx-1 
<div class="s-mx-1">
  <code>s-mx-1</code>
</div>
s-mx-1
.s-my-1 
<div class="s-my-1">
  <code>s-my-1</code>
</div>
s-my-1
.s-mt-1 
<div class="s-mt-1">
  <code>s-mt-1</code>
</div>
s-mt-1
.s-mr-1 
<div class="s-mr-1">
  <code>s-mr-1</code>
</div>
s-mr-1
.s-mb-1 
<div class="s-mb-1">
  <code>s-mb-1</code>
</div>
s-mb-1
.s-ml-1 
<div class="s-ml-1">
  <code>s-ml-1</code>
</div>
s-ml-1
.s-m-2 
<div class="s-m-2">
  <code>s-m-2</code>
</div>
s-m-2
.s-mx-2 
<div class="s-mx-2">
  <code>s-mx-2</code>
</div>
s-mx-2
.s-my-2 
<div class="s-my-2">
  <code>s-my-2</code>
</div>
s-my-2
.s-mt-2 
<div class="s-mt-2">
  <code>s-mt-2</code>
</div>
s-mt-2
.s-mr-2 
<div class="s-mr-2">
  <code>s-mr-2</code>
</div>
s-mr-2
.s-mb-2 
<div class="s-mb-2">
  <code>s-mb-2</code>
</div>
s-mb-2
.s-ml-2 
<div class="s-ml-2">
  <code>s-ml-2</code>
</div>
s-ml-2
.s-m-3 
<div class="s-m-3">
  <code>s-m-3</code>
</div>
s-m-3
.s-mx-3 
<div class="s-mx-3">
  <code>s-mx-3</code>
</div>
s-mx-3
.s-my-3 
<div class="s-my-3">
  <code>s-my-3</code>
</div>
s-my-3
.s-mt-3 
<div class="s-mt-3">
  <code>s-mt-3</code>
</div>
s-mt-3
.s-mr-3 
<div class="s-mr-3">
  <code>s-mr-3</code>
</div>
s-mr-3
.s-mb-3 
<div class="s-mb-3">
  <code>s-mb-3</code>
</div>
s-mb-3
.s-ml-3 
<div class="s-ml-3">
  <code>s-ml-3</code>
</div>
s-ml-3
.s-m-4 
<div class="s-m-4">
  <code>s-m-4</code>
</div>
s-m-4
.s-mx-4 
<div class="s-mx-4">
  <code>s-mx-4</code>
</div>
s-mx-4
.s-my-4 
<div class="s-my-4">
  <code>s-my-4</code>
</div>
s-my-4
.s-mt-4 
<div class="s-mt-4">
  <code>s-mt-4</code>
</div>
s-mt-4
.s-mr-4 
<div class="s-mr-4">
  <code>s-mr-4</code>
</div>
s-mr-4
.s-mb-4 
<div class="s-mb-4">
  <code>s-mb-4</code>
</div>
s-mb-4
.s-ml-4 
<div class="s-ml-4">
  <code>s-ml-4</code>
</div>
s-ml-4
.s-m-5 
<div class="s-m-5">
  <code>s-m-5</code>
</div>
s-m-5
.s-mx-5 
<div class="s-mx-5">
  <code>s-mx-5</code>
</div>
s-mx-5
.s-my-5 
<div class="s-my-5">
  <code>s-my-5</code>
</div>
s-my-5
.s-mt-5 
<div class="s-mt-5">
  <code>s-mt-5</code>
</div>
s-mt-5
.s-mr-5 
<div class="s-mr-5">
  <code>s-mr-5</code>
</div>
s-mr-5
.s-mb-5 
<div class="s-mb-5">
  <code>s-mb-5</code>
</div>
s-mb-5
.s-ml-5 
<div class="s-ml-5">
  <code>s-ml-5</code>
</div>
s-ml-5

Padding

Class Name HTML Example
.s-p-0 
<div class="s-p-0">
  <code>s-p-0</code>
</div>
s-p-0
.s-px-0 
<div class="s-px-0">
  <code>s-px-0</code>
</div>
s-px-0
.s-py-0 
<div class="s-py-0">
  <code>s-py-0</code>
</div>
s-py-0
.s-pt-0 
<div class="s-pt-0">
  <code>s-pt-0</code>
</div>
s-pt-0
.s-pr-0 
<div class="s-pr-0">
  <code>s-pr-0</code>
</div>
s-pr-0
.s-pb-0 
<div class="s-pb-0">
  <code>s-pb-0</code>
</div>
s-pb-0
.s-pl-0 
<div class="s-pl-0">
  <code>s-pl-0</code>
</div>
s-pl-0
.s-p-1 
<div class="s-p-1">
  <code>s-p-1</code>
</div>
s-p-1
.s-px-1 
<div class="s-px-1">
  <code>s-px-1</code>
</div>
s-px-1
.s-py-1 
<div class="s-py-1">
  <code>s-py-1</code>
</div>
s-py-1
.s-pt-1 
<div class="s-pt-1">
  <code>s-pt-1</code>
</div>
s-pt-1
.s-pr-1 
<div class="s-pr-1">
  <code>s-pr-1</code>
</div>
s-pr-1
.s-pb-1 
<div class="s-pb-1">
  <code>s-pb-1</code>
</div>
s-pb-1
.s-pl-1 
<div class="s-pl-1">
  <code>s-pl-1</code>
</div>
s-pl-1
.s-p-2 
<div class="s-p-2">
  <code>s-p-2</code>
</div>
s-p-2
.s-px-2 
<div class="s-px-2">
  <code>s-px-2</code>
</div>
s-px-2
.s-py-2 
<div class="s-py-2">
  <code>s-py-2</code>
</div>
s-py-2
.s-pt-2 
<div class="s-pt-2">
  <code>s-pt-2</code>
</div>
s-pt-2
.s-pr-2 
<div class="s-pr-2">
  <code>s-pr-2</code>
</div>
s-pr-2
.s-pb-2 
<div class="s-pb-2">
  <code>s-pb-2</code>
</div>
s-pb-2
.s-pl-2 
<div class="s-pl-2">
  <code>s-pl-2</code>
</div>
s-pl-2
.s-p-3 
<div class="s-p-3">
  <code>s-p-3</code>
</div>
s-p-3
.s-px-3 
<div class="s-px-3">
  <code>s-px-3</code>
</div>
s-px-3
.s-py-3 
<div class="s-py-3">
  <code>s-py-3</code>
</div>
s-py-3
.s-pt-3 
<div class="s-pt-3">
  <code>s-pt-3</code>
</div>
s-pt-3
.s-pr-3 
<div class="s-pr-3">
  <code>s-pr-3</code>
</div>
s-pr-3
.s-pb-3 
<div class="s-pb-3">
  <code>s-pb-3</code>
</div>
s-pb-3
.s-pl-3 
<div class="s-pl-3">
  <code>s-pl-3</code>
</div>
s-pl-3
.s-p-4 
<div class="s-p-4">
  <code>s-p-4</code>
</div>
s-p-4
.s-px-4 
<div class="s-px-4">
  <code>s-px-4</code>
</div>
s-px-4
.s-py-4 
<div class="s-py-4">
  <code>s-py-4</code>
</div>
s-py-4
.s-pt-4 
<div class="s-pt-4">
  <code>s-pt-4</code>
</div>
s-pt-4
.s-pr-4 
<div class="s-pr-4">
  <code>s-pr-4</code>
</div>
s-pr-4
.s-pb-4 
<div class="s-pb-4">
  <code>s-pb-4</code>
</div>
s-pb-4
.s-pl-4 
<div class="s-pl-4">
  <code>s-pl-4</code>
</div>
s-pl-4
.s-p-5 
<div class="s-p-5">
  <code>s-p-5</code>
</div>
s-p-5
.s-px-5 
<div class="s-px-5">
  <code>s-px-5</code>
</div>
s-px-5
.s-py-5 
<div class="s-py-5">
  <code>s-py-5</code>
</div>
s-py-5
.s-pt-5 
<div class="s-pt-5">
  <code>s-pt-5</code>
</div>
s-pt-5
.s-pr-5 
<div class="s-pr-5">
  <code>s-pr-5</code>
</div>
s-pr-5
.s-pb-5 
<div class="s-pb-5">
  <code>s-pb-5</code>
</div>
s-pb-5
.s-pl-5 
<div class="s-pl-5">
  <code>s-pl-5</code>
</div>
s-pl-5

Borders

Sides

Class Name HTML Example
.s-border 
<span class="s-border"></span>
.s-border-top 
<span class="s-border-top"></span>
.s-border-right 
<span class="s-border-right"></span>
.s-border-bottom 
<span class="s-border-bottom"></span>
.s-border-left 
<span class="s-border-left"></span>

Width

Class Name HTML Example
.s-border-width-0 
<span class="s-border s-border-width-0"></span>
.s-border-width-1 
<span class="s-border s-border-width-1"></span>
.s-border-width-2 
<span class="s-border s-border-width-2"></span>
.s-border-width-3 
<span class="s-border s-border-width-3"></span>
.s-border-width-4 
<span class="s-border s-border-width-4"></span>

Radius

Class Name HTML Example
.s-border-radius-0 
<span class="s-border-radius-0"></span>
.s-border-radius-1 
<span class="s-border-radius-1"></span>
.s-border-radius-2 
<span class="s-border-radius-2"></span>
.s-border-radius-circle 
<span class="s-border-radius-circle"></span>
.s-border-radius-pill 
<span class="s-border-radius-pill"></span>

Shadows

Class Name HTML Example
.s-shadow-sm 
<div class="s-shadow-sm">
  <div class="s-p-2"></div>
</div>
.s-shadow-md 
<div class="s-shadow-md">
  <div class="s-p-2"></div>
</div>
.s-shadow-lg 
<div class="s-shadow-lg">
  <div class="s-p-2"></div>
</div>