Variables Cheatsheet
Índice de componentes
Componentes y derivadas de Holygrail2. Enlaces a cada sección de la guía.
Base y sistema
Botones y controles
- Buttons (Primary, Secondary, Tertiary, Label M, Badge)
- Button sizes
- Button link tab / btn-lines
- Select
- Stepper
- Button group
Formularios y selección
- Tabs
- Radio Button
- Checkbox
- Checkbox-card (check-no, check-top, check-center)
- Accesibilidad
- Input / Form
Contenido y enlaces
- Cards (box3, checkbox-radio)
- md-link (line-top, line-bottom)
- md-toggle / md-toggle-lines
- Links (link-line, link-raw, link4, link-button-prev)
- List (list-clear, list-disc, list-inline, list-inline-flex, list-box, list-button, list-state)
- Tag (tag-warning, tag-info, tag-valid, tag-alert, tag-feel, tag-limited, tag-new)
Overlays y feedback
- Tooltip (tooltip-sm, tooltip-sm-temp, posiciones)
- Progressbar
- Modal (modalx-xxs, modalx-xs, modalx-sm, modalx-md, modalx-lg, modalx-xl)
- Toast
- Bottom-sheet
- Drawer (drawer-sm, drawer-xl)
Navegación y MD
- Sidebar
- Banners (banner-warning, banner-info, banner-valid, banner-alert, banner-feel, banner-limited, marketing-spot)
- md-accordion
- md-dialog
- md-drawer
- md-buttons
Datos y especiales
- Datalist
- Color selector
- Tabs specials (checkbox-ico, checkbox-box, list-box, multiple-table)
- Animated
Layouts
- Runway
- Hgbread
- Header account
- Box3 (box3-content, box3-middle, box3-top, box3-img)
- Card9
Grid System xxxx
The grid system uses a series of containers, rows, and columns to layout and align content.
1
2
3
4
5
6
7
8
9
10
11
12
Resoluciones
Tamaño de Pantalla
Número de Columnas
Tipo de Resolución
Ancho de Columnado
xs
1
Mobile
1px
sm
2
Tablet
768px
md
3
Desktop
992px
lg
4
Large
Desktop
1280px
xl
5
Extra Large Desktop
1440px
Variables
-
$c-white#fff
-
$c-black#000
-
$c-light-grey#F9F9F9
-
$c-middle-grey#a9a9a9
-
$c-dark-grey#737373
-
$c-primary-3rgba(0, 0, 0, 0.3)
-
$c-primary-15rgba(0, 0, 0, 0.15)
-
$c-primary-30rgba(0, 0, 0, 0.3)
-
$c-primary-60rgba(0, 0, 0, 0.6)
-
$c-primary-97rgba(0, 0, 0, 0.97)
-
$c-secondary-3rgba(255, 255, 255, 0.3)
-
$c-secondary-15rgba(255, 255, 255, 0.15)
-
$c-secondary-30rgba(255, 255, 255, 0.3)
-
$c-secondary-60rgba(255, 255, 255, 0.6)
-
$c-secondary-97rgba(255, 255, 255, 0.97)
-
$c-primary#000
-
$c-secondary#000
-
$c-accent#B40016
-
$c-error#B40016
-
$c-sale#ffce4e
-
$c-info#1a32a4
-
$c-info-light#E5EAFF
-
$c-valid#12882c
-
$c-warning#ffce4e
-
$c-notice#e5740b
-
$c-orange#e5740b
-
$c-limited#000
-
$c-success#12882c
-
$c-alert#ffce4e
-
$c-facebook#186CF1
-
$c-google#4285f4
-
$c-naver#03cf5d
-
$c-wechat#2dc100
-
$c-feel#000000
-
$c-feel-light#f0f0f0
-
$c-feel-dark#a9a9a9
-
$c-tier-silver#87888d
-
$c-tier-platinum#5b7fa1
-
$c-tier-gold#a38a6b
-
$bg-light#f0f0f0
-
$bg-dark#000
-
$bg-black#000
-
$c-bg-light#000
-
$c-bg-dark#fff
-
$white-smoke#f0f0f0
-
$primary#000000
-
$primary-guide#363636
-
$secondary-guide#6759bb
-
$ternary-guide#6759bb
-
$list-disc-color#1a1a1a
Typography
h2
Aa
18px
24px
1.2
"bold"
title-l-b
Aa
14px
14px
1.4
"semibold"
title-s
Aa
12px
12px
1.4
"regular"
suisse-1
Aa
16px
20px
1.5
"regular3"
suisse-2
Aa
13px
14px
1.1
"regular3"
suisse-body
Aa
10px
12px
1.1
"regular3"
p-tag
Aa
8px
8px
1
"light"
semantic
Aa
13px
13px
1
"light"
title-l
Aa
14px
14px
1.4
"light"
title-m
Aa
12px
12px
1.4
"light"
text-m
Aa
12px
13px
1.5
"light"
text-l
Aa
12px
12px
1.5
"light"
Headers Fixers
12
12px
1.5
14
14px
1.5
16
16px
1.5
18
18px
1.5
20
20px
1.2
24
24px
1.2
32
32px
1.2
40
40px
1.2
Headers Fluids
1
60px
160px
0.8
2
40px
100px
0.9
3
20px
30px
0.9
UI Components
Buttons
Button sizes
Clases de tamaño: .btn--mini, .btn--small, .btn--medium, .btn--large, .btn--xlarge, .btn--mini-rd, .btn--full, .btn--round
.btn--mini
.btn--small
.btn--medium
.btn--large
.btn--xlarge
.btn--mini-rd
.btn--full
.btn--round