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.
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
Blue-gradient
Inst-gradient
purple-gradient
Green-gradient
Transparent
Default
Gray
White
Dark
Black
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><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><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>
<i class="fas fa-users text-primary"></i>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.
