<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic-UI Step Variations</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
center
>
<
h1
class
=
"ui header green"
>Geeksforgeeks</
h1
>
<
strong
> Semantic-UI Step Variations </
strong
>
<
br
/><
br
/>
</
center
>
<
p
>Mini:</
p
>
<
div
class
=
"ui mini steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Tiny:</
p
>
<
div
class
=
"ui tiny steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Small:</
p
>
<
div
class
=
"ui small steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Large:</
p
>
<
div
class
=
"ui large steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Big:</
p
>
<
div
class
=
"ui big steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Huge:</
p
>
<
div
class
=
"ui huge steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
br
>
<
p
>Massive:</
p
>
<
div
class
=
"ui massive steps"
>
<
div
class
=
"step"
>
<
i
class
=
"pencil alternate icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Write in gfg</
div
>
<
div
class
=
"description"
>
Pick and article and write it.
</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"eye icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>In review</
div
>
<
div
class
=
"description"
>
The article is reviewed once submitted
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>