Junker Webview Components

Install

css in <head> tag

<link rel="stylesheet" href="https://developer.junkerapp.it/junker_webview_components/junker-components.css">

Colors

Color palette CSS variables. var(--variable);

Main Colors

--primary

.bg-primary

.fg-primary

--secondary

.bg-secondary

.fg-secondary

--gray

.bg-gray

.fg-gray

--white

.bg-white

.fg-white

--black

.bg-black

.fg-black

All Colors

--primary-50

--primary-100

--primary-200

--primary-300

--primary-400

--primary-500

--primary-600

--primary-700

--primary-800

--primary-900

--secondary-50

--secondary-100

--secondary-200

--secondary-300

--secondary-400

--secondary-500

--secondary-600

--secondary-700

--secondary-800

--secondary-900

--danger-100

--danger-200

--danger-300

--danger-400

--danger-500

--danger-600

--danger-700

--danger-800

--danger-900

--success-100

--success-200

--success-300

--success-400

--success-500

--success-600

--success-700

--success-800

--success-900

--gray-20

--gray-40

--gray-60

--gray-80

--gray-100

--gray-200

--gray-300

--gray-400

--gray-500

--gray-600

--gray-700

--gray-800

--gray-900

--black-alpha-10

--black-alpha-20

--black-alpha-300

--black-alpha-400

--black-alpha-500

--black-alpha-600

--black-alpha-700

--black-alpha-80

--black-alpha-90

--white-alpha-10

--white-alpha-20

--white-alpha-300

--white-alpha-400

--white-alpha-500

--white-alpha-600

--white-alpha-700

--white-alpha-80

--white-alpha-90

Typography

Typography classes

h1 or .h1

H1 / Bricolage Grotesque / Medium / 32 px

h2 or .h2

H2 / Bricolage Grotesque / Medium / 24 px

h3 or .h3

H3 / Bricolage Grotesque / Medium / 20 px

h4 or .h4

H4 / Bricolage Grotesque / Medium / 18 px

.b1

Body Big / DM Sans / Regular / 16 px

.b1-bold

Body Big / DM Sans / Medium / 16 px

.b2

Body Medium / DM Sans / Regular / 14 px (Main Font)

.b2-bold

Body Medium / DM Sans / Medium / 14 px

.b3

Body Small / DM Sans / Regular / 12 px

.b3-bold

Body Small / DM Sans / Medium / 12 px

Buttons

All buttons - .btn-full-width if you need the button full width of the container

Primary Button XL

<button class="btn btn-primary btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

Primary Button Large

<button class="btn btn-primary btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

Primary Button Medium

<button class="btn btn-primary btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

Primary Button Small

<button class="btn btn-primary btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

Secondary Button XL

<button class="btn btn-secondary btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

Secondary Button Large

<button class="btn btn-secondary btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

Secondary Button Medium

<button class="btn btn-secondary btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

Secondary Button Small

<button class="btn btn-secondary btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

Danger Button XL

<button class="btn btn-danger btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

Danger Button Large

<button class="btn btn-danger btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

Danger Button Medium

<button class="btn btn-danger btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

Danger Button Small

<button class="btn btn-danger btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

Neutral Button XL

<button class="btn btn-neutral btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

Neutral Button Large

<button class="btn btn-neutral btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

Neutral Button Medium

<button class="btn btn-neutral btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

Neutral Button Small

<button class="btn btn-neutral btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

Ghost Button XL

<button class="btn btn-ghost btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

Ghost Button Large

<button class="btn btn-ghost btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

Ghost Button Medium

<button class="btn btn-ghost btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

Ghost Button Small

<button class="btn btn-ghost btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

White Button XL

<button class="btn btn-white btn-xl"> <i class="ji ji-location"></i> <span>Item</span> </button>

White Button Large

<button class="btn btn-white btn-large"> <i class="ji ji-location"></i> <span>Item</span> </button>

White Button Medium

<button class="btn btn-white btn-medium"> <i class="ji ji-location"></i> <span>Item</span> </button>

White Button Small

<button class="btn btn-white btn-small"> <i class="ji ji-location"></i> <span>Item</span> </button>

Icons

Default icon example: (24x24 px black)

<i class="ji ji-ICON_NAME"></i>

Extra parameters (Size):

21x21 px

<i class="ji ji-ICON_NAME ji-21"></i>

28x28 px

<i class="ji ji-ICON_NAME ji-28"></i>

32x32 px

<i class="ji ji-ICON_NAME ji-32"></i>

Extra parameters (Color):

Primary

<i class="ji ji-ICON_NAME ji-primary"></i>

Secondary

<i class="ji ji-ICON_NAME ji-secondary"></i>

Black (default)

<i class="ji ji-ICON_NAME ji-black"></i>

White

<i class="ji ji-ICON_NAME ji-white"></i>

Danger

<i class="ji ji-ICON_NAME ji-danger"></i>

All Icons

location

audio

search

close

keyboard-arrow-up

keyboard-arrow-down

keyboard-arrow-left

keyboard-arrow-right

arrow_down

arrow_left

arrow_right

arrow_up

lang

mic

bell

water

add

barcode

heart_empty

heart

leaf

location

location_ok

photo

camera

symbols

txt

calendar

check_empty

check

simple_check

warning

home

map

map_search

user

shirt

waveform

filter

shout

note

add_note

delete

document

edit

expand

ext_link

feedback

image

image_add

info

more

qr

refresh

settings

visibility

visibility_no

Form

Inputs, textareas etc.

Input

<div class="input-field"> <label for="fname">Label:</label> <input type="text" id="fname" placeholder="Text here.."> </div>

Textarea

<div class="input-field"> <label for="t_area">Label:</label> <textarea id="t_area" placeholder="Text here.." rows="3"></textarea> </div>

Select

<div class="input-field"> <label for="select">Label:</label> <select id="select"> <option value="1">Select..</option> <option value="2">Placeholder</option> <option value="3">Placeholder</option> </select> </div>

Search

<div class="input-field"> <div class="input-with-icon"> <input type="search" id="search" placeholder="Search.." oninput="this.classList.toggle('search-has-value', this.value.length > 0)"> <i class="ji ji-close" onclick=" const input = this.closest('.input-with-icon').querySelector('input');input.value = ''; input.classList.remove('search-has-value'); input.focus();"></i> <i class="ji ji-search"></i> </div> </div>

Input with Icon

<div class="input-field"> <div class="input-with-icon"> <input type="text" id="input_icon" placeholder="Text.."> <i class="ji ji-location"></i> </div> </div>

Switch

<div class="switch-row"> <span class="switch-label">Notifiche</span> <label class="ios-switch"> <input type="checkbox"> <span class="slider"></span> </label> </div>

<label class="j_checkbox"> <input type="checkbox"> <span class="checkmark"></span> <span>Checkbox</span> </label>

<label class="j_radio"> <input type="radio" name="radio"> <span class="radio_checkmark"></span> <span>Radio Button</span> </label>

Loader

Loader Colors

<div class="loader"></div>

<div class="loader loader-primary"></div>

<div class="loader loader-secondary"></div>

<div class="loader loader-black"></div>

Loader Sizes

loader-12

loader-16

loader-21

no-class (24px)

loader-28

loader-32

loader-36

loader-40

Lists

List style

<ul class="list-style"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2 <i class="ji ji-21 ji-keyboard-arrow-right"></i></a></li> <li> <span> Option 3 <div class="switch-row"> <label class="ios-switch"> <input type="checkbox"> <span class="slider"></span> </label> </div> </span> </li> <li class="selected"><a href="#">Option 4</a></li> <li class="selected"><a href="#">Option 5 <i class="ji ji-21 ji-location"></i></a></li> <li><a href="#"> <span> <h4>Option 6</h4> <p class="b3">Subtitle</p> </span> </a> </li> <li> <span> <label class="j_radio"> <span>Option 7</span> <input type="radio" name="radio"> <span class="radio_checkmark"></span> </label> </span> </li> </ul>

Tabs

Multiple tabs navigation

<ul class="tab_nav"> <li class="selected"><a href="#">Item</a></li> <li><a href="#"><i class="ji ji-location ji-21"></i>Item</a></li> <li><a href="#">Item</a></li> </ul>

Chips

Chips Style

Articoli sportivi Centro del Riuso Placeholder

<div class="chips-cnt"> <span class="chip chip-primary">Articoli sportivi</span> <span class="chip chip-accent">Centro del Riuso</span> <span class="chip chip-white">Placeholder</span> </div>

Cards

Cards

Binocolo per birdwatching

Leggero e resistente, zoom 20x e infrarossi di ultima generazione

Centro del riuso Via Giovanni Lazzari, 22
Articoli sportivi Centro del Riuso
Binocolo per birdwatching

Binocolo per birdwatching

Leggero e resistente, zoom 20x e infrarossi di ultima generazione

Centro del riuso
Via Giovanni Lazzari, 22
Articoli sportivi Centro del Riuso
Binocolo per birdwatching

<div class="card-list"> <article class="board-card" role="button"> <div class="card-content"> <div class="card-text"> <h3 class="card-title">Binocolo per birdwatching</h3> <p class="card-desc b3">Leggero e resistente, zoom 20x e infrarossi di ultima generazione</p> </div> <div class="card-location"> <i class="ji ji-location ji-21 location-icon"></i> <span class="b3-bold location-text"> Centro del riuso Via Giovanni Lazzari, 22 </span> </div> <div class="chips-cnt"> <span class="chip chip-primary">Articoli sportivi</span> <span class="chip chip-accent">Centro del Riuso</span> </div> </div> <div class="card-image-wrapper"> <img src="https://placehold.co/600x600" alt="Binocolo per birdwatching" class="card-image" loading="lazy" /> </div> </article> </div>