About S3 Badges

S3 Badges built with pure CSS which is easy to use in any project please read the complete documentation we have briefly define the usage of s3-badges.

Key Features

• 10 Colors
• 2 Positions
• 3 Sizes

Designed and built with all the love in the world by @Shaz3e.

Examples Size & Color Options

Usage How to Implement

To use S3-Badges is just simple as a piece of cake you just need to keep 3 things in mind. WHERE, HOW & WHICH

In addition to including the s3-badges.css file in the head of your HTML file, you will need to create a parent div or element with position: relative. Within this element, you will place the badges HTML code, as shown below.

1. Where would you to place your badge? i.e. Left or Right
2. How small or big you want your badge to be? i.e do not mention or small or big
3. Which color would you like to use? i.e. red, green or blue

S3-Badge has simple logic as said only 3 things you need to keep in mind let's have a look on some examples

1. Where: left
2. How: small
3. Which: red

<div class="s3-badge-left-small">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

1. Where: left
2. How: default (do not mention)
3. Which: red

<div class="s3-badge-left">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

1. Where: left
2. How: big
3. Which: red

<div class="s3-badge-left-big">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

1. Where: right
2. How: small
3. Which: red

<div class="s3-badge-right-small">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

1. Where: right
2. How: default (do not mention)
3. Which: red

<div class="s3-badge-right">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

1. Where: right
2. How: big
3. Which: red

<div class="s3-badge-right-big">
	<div class="s3-badge-text-red">Ribbon</div>
</div>

Result The Final Demo

CSS

Example div element with relative positioning and other styling:

.yourClass{
    position:relative; /* This is important */
    float:left;
    margin:2.5%;
    width:19.7%;
    height:200px;
    border:solid 1px #f0f0f0;
}

HTML

Just the badge portion:

<div class="s3-badge-left-big">
   <div class="s3-badge-text-red">Ribbon</div>
</div>

Badge placed within a relative positioned div element:

<div class="yourClass">
    <!-- start badge -->
    <div class="s3-badge-left-big">
        <div class="s3-badge-text-red">Ribbon</div>
    </div>
    <!-- end badge -->
    <!-- your content goes here -->
</div>