Color palette Utilities

Our color palette consists of neutral, white and blue. These colors are used as variants in all classes of eFrolic, that is, as a second class after the main one to personalize elements.

Colors convey meaning and add a bit of emotional weight to the elements.


Use as background

After a main class, example: e-btn apply the desired color in lowercase letters.

Required: A main class of eFrolic.

Warning: Some components are not compatible with all colors.

<a class="e-btn primary">Color</a>
<div class="e-alert danger">...</div>


Primary / #1da1f2


Success / #4fd69c


Danger / #f75676


Warning / #ffdd57


Sky / #54c7ec


Purple / #5e72e4

Colors gradient.



Blue-gradient


Inst-gradient


purple-gradient


Green-gradient


Colors between black and white.



Transparent


Default


Gray


White


Dark


Black

Use as text color

Add text- after the color to use.

Warning: Not all colors are available for text.

<a class="text-primary">Color</a>
<p class="text-danger">...</p>
<h2 class="text-sky">...</h2>

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

<p class="text-white">text-white</p>
<p class="text-gray">text-gray</p>
<p class="text-dark">text-dark</p>
<p class="text-black">text-black</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-danger">text-danger</p>
<p class="text-warning">text-warning</p>
<p class="text-sky">text-sky</p>
<p class="text-purple">text-purple</p>

Using in anchors

text-white

text-gray

text-dark

text-black

text-primary

text-success

text-danger

text-warning

text-sky

text-purple

<p><a href="#" class="link text-white">text-white</a></p>
<p><a href="#" class="link text-gray">text-gray</a></p>
<p><a href="#" class="link text-dark">text-dark</a></p>
<p><a href="#" class="link text-black">text-black</a></p>
<p><a href="#" class="link text-primary">text-primary</a></p>
<p><a href="#" class="link text-success">text-success</a></p>
<p><a href="#" class="link text-danger">text-danger</a></p>
<p><a href="#" class="link text-warning">text-warning</a></p>
<p><a href="#" class="link text-sky">text-sky</a></p>
<p><a href="#" class="link text-purple">text-purple</a></p>

Using in heading

text-white

text-gray

text-dark

text-danger

text-warning

text-sky

text-purple

text-black

text-primary
text-success
<h1 class="text-white">text-white</h1>
<h2 class="text-gray">text-gray</h2>
<h3 class="text-dark">text-dark</h3>
<h1 class="text-danger">text-danger</h1>
<h2 class="text-warning">text-warning</h2>
<h3 class="text-sky">text-sky</h3>
<h4 class="text-purple">text-purple</h4>
<h4 class="text-black">text-black</h4>
<h5 class="text-primary">text-primary</h5>
<h6 class="text-success">text-success</h6>

Using in icons

<i class="fas fa-users text-primary"></i>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron