Fika Doodle & Dash Styles

Basic Usage

Apply these classes to <span> elements to add decorative underlines or doodles to your text. Use the base class fika-doodle combined with the specific doodle class name.

Default Position (Below Text)

Chalk Blue Dash
Chalk Blue
Chalk Yellow Dash
Chalk Yellow Doodle
Dashes Acrylic
Green Doodle Acrylic
Scribble Dashed Line Crayon
Scribble Elipse Crayon
Scribble Line Crayon
Yellow Doodle Acrylic
Scribble Blue Crayon
Scribble Red Crayon
Scribble Rectangle Crayon
Scribble Two Lines Crayon
Red Doodle Acrylic
White Doodle Acrylic
White Strokes Acrylic
White Red Doodle Acrylic
White Zigzag Doodle Acrylic

High Position Variant

Add the high class to position closer to the text

Chalk Blue Dash
Chalk Blue
Chalk Yellow Dash
Chalk Yellow Doodle
Dashes Acrylic
Green Doodle Acrylic
Scribble Dashed Line Crayon
Scribble Elipse Crayon
Scribble Line Crayon
Yellow Doodle Acrylic
Scribble Blue Crayon
Scribble Red Crayon
Scribble Rectangle Crayon
Scribble Two Lines Crayon
Red Doodle Acrylic
White Doodle Acrylic
White Strokes Acrylic
White Red Doodle Acrylic
White Zigzag Doodle Acrylic

Examples in Context

Welcome to Fika Coffee, where we serve the best coffee in town. Our specialty drinks are made with locally roasted beans.

Join us for happy hour every Friday from 4-6pm. Enjoy discounted prices on all our signature cocktails.

Our co-working space is open Monday to Saturday, 8am to 8pm. Free high-speed WiFi included with any purchase.

Usage Instructions

HTML Example

<p>
  Welcome to <span class="fika-doodle chalk-yellow-doodle" title="fika-doodle chalk-yellow-doodle">Fika Coffee</span>,
  where we serve the best coffee in town.
</p>

Position Variants

<!-- Default position (below text) -->
<span class="fika-doodle chalk-blue-dash" title="fika-doodle chalk-blue-dash">Default Position</span>

<!-- High position (closer to text) -->
<span class="fika-doodle chalk-blue-dash high" title="fika-doodle chalk-blue-dash high">High Position</span>

<!-- Center position (through the middle of text) -->
<span class="fika-doodle chalk-blue-dash center" title="fika-doodle chalk-blue-dash center">Center Position</span>

Opacity Variants

Apply these opacity classes to control the transparency of the doodle effect. Use the base class fika-doodle combined with a doodle style and an opacity class.

Opacity Examples

30% Opacity
50% Opacity
70% Opacity
100% Opacity (Default)

Opacity with Different Styles

Rectangle with 40% Opacity
Green Doodle with 60% Opacity
Red Crayon with 80% Opacity

Opacity Usage Example

<!-- Adding 70% opacity to a doodle -->
<span class="fika-doodle chalk-yellow-dash fika-opacity-70">Text with 70% opacity doodle</span>

<!-- Combining with position variants -->
<span class="fika-doodle chalk-blue-dash high fika-opacity-50">High position with 50% opacity</span>

Fika Icons

Apply these classes to <span> elements to add decorative icons. Use the base class fika-icon combined with the specific icon class name.

Icon Examples

heart

star

check

cross

home

mail

camera

lock

bulb on

bulb off

speech

smile

Size Variants

Add size classes: small, medium (default), large, or xlarge

small

medium

large

xlarge

All Available Icons

Below is a comprehensive list of all available icons, organized by type.

Crayon Icons

alarm-clock-crayon
asterisk-crayon
bar-chart-crayon
check-mark-crayon
correct-box-crayon
cross-mark-crayon
dollar-crayon
double-arrow-crayon
email-crayon
envelope-crayon
euro-crayon
exclamation-mark-crayon
facebook-crayon
forward-crayon
globe-crayon
graph-negative-crayon
graph-positive-crayon
headphones-crayon
home-crayon
incorrect-box-crayon
information-crayon
key-crayon
label-crayon
letter-a-crayon
letter-b-crayon
letter-c-crayon
letter-d-crayon
light-bulb-off-crayon
light-bulb-on-crayon
link-crayon
lock-crayon
mail-crayon
mute-crayon
naught-box-crayon
pen-crayon
pencil-crayon
photo-camera-crayon
pin-blue-crayon
pin-red-crayon
player-forward-crayon
player-pause-crayon
player-play-crayon
player-repeat-crayon
player-rewind-crayon
player-stop-crayon
plus-box-crayon
plus-crayon
power-crayon
printer-crayon
question-mark-crayon
quotation-marks-crayon
round-arrow-crayon
round-double-arrow-crayon
rss-crayon
scribble-circle-crayon
scribble-circle-thick-crayon
scribble-cross-crayon
scribble-white-crayon
shopping-cart-crayon
smile-crayon
sound-crayon
speech-bubble-crayon
speech-cloud-crayon
square-root-crayon
star-crayon
trash-crayon
twitter-crayon
zoom-crayon

Chalk Icons

asterisk-chalk
check-mark-chalk
circle-chalk
cross-chalk
division-mark-chalk
minus-chalk
plus-chalk
square-chalk
stick-one-chalk
sticks-four-chalk
sticks-four-crossed-chalk
sticks-three-chalk
sticks-two-chalk
triangle-chalk

Acrylic Icons

dashes-acrylic
green-arrow-acrylic
green-red-swirls-acrylic
hashtag-acrylic
heart-acrylic
kitty-acrylic
pink-doodle-acrylic
red-arrow-acrylic
red-green-ring-acrylic
ring-acrylic
speech-bubble-acrylic
spiral-arrow-acrylic
three-dots-acrylic
tornado-acrylic
white-arrow-acrylic
yellow-arrow-acrylic
yellow-zigzag-doodle-acrylic
zigzag-arrow-acrylic

Food Icons

Apply these classes to <span> elements to add food-themed icons. Use the base class food-icon combined with the specific food icon class name.

Food Icon Examples

banana

bread

fruit-bowl

ice-cream

croissant

lollipop

muffin

teabag

Size Variants

Add size classes: small, medium (default), large, or xlarge

small

medium

large

xlarge

All Available Food Icons

Below is a comprehensive list of all available food icons.

banana
bread
chicken-drumstick
croissant
fruit-bowl
grapes
ice-cream
leaves
lemon
lollipop
muffin
mushroom-big
mushroom-small
noodle-soup
noodles
onions
pear
pretzel
tea-leaf
teabag
toast
tortilla
turnip
veggie-skewer

Page Break Dividers

Apply these classes to <div> elements to add decorative page break dividers. Use the base class page-divider combined with the specific divider class name.

Divider Examples

city-scape

skyline

horizon

Size Variants

Add size classes: small, medium (default), large, or xlarge

small

medium (default)

large

All Available Dividers

Below is a comprehensive list of all available page break dividers.

city-scape

earphones

graph

grass

head-phones

horizon

ionic

lawn

loop

skyline

usb-cable

usb-charger

Divider Usage Instructions

HTML Example

<!-- Basic divider usage -->
<div class="page-divider city-scape"></div>

<!-- With size variant -->
<div class="page-divider skyline large"></div>

<!-- With color variant -->
<div class="page-divider horizon dark"></div>

Icon Usage Instructions

HTML Example

<!-- Basic icon usage -->
<span class="fika-icon heart-acrylic"></span>

<!-- With size variant -->
<span class="fika-icon heart-acrylic large"></span>

<!-- Food icon usage -->
<span class="food-icon bread"></span>

<!-- Food icon with size variant -->
<span class="food-icon bread large"></span>