Encabezados
-
Manera en la que pueden hacer uso de las clases:
- header_h1
- header_h2
- header_h3
- header_h4
- header_h5
- header_h6
- header_h6_green
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 6
Header 6
Colores para fondos
-
Manera en la que pueden hacer uso de las clases:
- * dark_blue_bg_900
- * dark_blue_bg_700
- * dark_blue_bg_400
- * dark_blue_bg_100
- * green_bg_900
- * green_bg_700
- * green_bg_400
- * green_bg_100
- * indigo_bg_900
- * indigo_bg_600
- * indigo_bg_300
- * midnightblue_bg_900
- * midnightblue_bg_600
- * midnightblue_bg_300
- * mediumgray_bg_900
- * mediumgray_bg_600
- * mediumgray_bg_300
- * lightgray_bg_900
- * lightgray_bg_600
- * lightgray_bg_300
Background Dark Blue 900
Background Dark Blue 700
Background Dark Blue 400
Background Dark Blue 100
Background Green 900
Background Green 700
Background Green 400
Background Green 100
Background Indigo 900
Background Indigo 600
Background Indigo 300
Background Midnight Blue 900
Background Midnight Blue 600
Background Midnight Blue 300
Background Medium Gray 900
Background Medium Gray 600
Background Medium Gray 300
Background Light Gray 900
Background Light Gray 600
Background Light Gray 300
Colores para textos
-
Manera en la que pueden hacer uso de las clases:
- * dark_blue_900
- * dark_blue_700
- * dark_blue_400
- * dark_blue_100
- * green_900
- * green_700
- * green_400
- * green_100
- * indigo_900
- * indigo_600
- * indigo_300
- * midnightblue_900
- * midnightblue_600
- * midnightblue_300
- * mediumgray_900
- * mediumgray_600
- * mediumgray_300
- * lightgray_900
- * lightgray_600
- * lightgray_300
- * bf_color
Font Color Dark Blue 900
Font Color Dark Blue 700
Font Color Dark Blue 400
Font Color Dark Blue 100
Font Color Green 900
Font Color Green 700
Font Color Green 400
Font Color Green 100
Font Color Indigo 900
Font Color Indigo 600
Font Color Indigo 300
Font Color Midnight Blue 900
Font Color Midnight Blue 600
Font Color Midnight Blue 300
Font Medium Gray Blue 900
Font Medium Gray Blue 600
Font Medium Gray Blue 300
Font Light Gray Blue 900
Font Light Gray Blue 600
Font Light Gray Blue 300
Body Font Color
Textos
-
Manera en la que pueden hacer uso de las clases:
- bf_size
- text_justify
- text_left
- text_right
Este es el cuerpo de texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ante id dolor ullamcorper, quis ornare dui egestas. Nullam ut sapien ac eros faucibus porttitor. Suspendisse ac cursus quam. Aliquam egestas in ante cursus ultrices. Etiam non est a erat condimentum malesuada id at tortor. Fusce purus elit, porta at ipsum eget, tincidunt fringilla arcu. Fusce non aliquet turpis, sit amet sollicitudin libero. Aliquam euismod libero in felis eleifend posuere. In mollis elit vel vulputate interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet vestibulum quam. Nam vestibulum magna non volutpat consequat. Maecenas eleifend odio at quam tincidunt, et commodo arcu interdum. In hac habitasse platea dictumst.
- bf_size: Body Font Size
- bf_color: Body Font Color
- text_justify: Text Align Justify
Este es el cuerpo de texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ante id dolor ullamcorper, quis ornare dui egestas. Nullam ut sapien ac eros faucibus porttitor. Suspendisse ac cursus quam. Aliquam egestas in ante cursus ultrices. Etiam non est a erat condimentum malesuada id at tortor. Fusce purus elit, porta at ipsum eget, tincidunt fringilla arcu. Fusce non aliquet turpis, sit amet sollicitudin libero. Aliquam euismod libero in felis eleifend posuere. In mollis elit vel vulputate interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet vestibulum quam. Nam vestibulum magna non volutpat consequat. Maecenas eleifend odio at quam tincidunt, et commodo arcu interdum. In hac habitasse platea dictumst.
- bf_size: Body Font Size
- bf_color: Body Font Color
- text_left: Text Align Left
Este es el cuerpo de texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ante id dolor ullamcorper, quis ornare dui egestas. Nullam ut sapien ac eros faucibus porttitor. Suspendisse ac cursus quam. Aliquam egestas in ante cursus ultrices. Etiam non est a erat condimentum malesuada id at tortor. Fusce purus elit, porta at ipsum eget, tincidunt fringilla arcu. Fusce non aliquet turpis, sit amet sollicitudin libero. Aliquam euismod libero in felis eleifend posuere. In mollis elit vel vulputate interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet vestibulum quam. Nam vestibulum magna non volutpat consequat. Maecenas eleifend odio at quam tincidunt, et commodo arcu interdum. In hac habitasse platea dictumst.
- bf_size: Body Font Size
- bf_color: Body Font Color
- text_right: Text Align Right
Font 1
Roboto Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 (.:,;&%€)
Font 2
Roboto Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 (.:,;&%€)
Font 3
Roboto Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 (.:,;&%€)
- bw_normal: Body Font Weight Normal
- bw_medium: Body Font Weight Medium
- bw_bold: Body Font Weight Bold
- fs-3: Font Size (Clase propia de Bootstrap 5)
- text-break: Word Break (Clase propia de Bootstrap 5)
Action Cards Asigna
Si lo que necesita es agregar más Actions Cards y necesita agregar las imagenes
respectivas para el fondo y hover, debe hacer lo siguiente:
El div padre del card que contiene
.card .card--1
El primer card debera ser .card--1 el siguiente card debera ser .card--2 y
asi sucesivamente, Ahora para la parte de las imagenes tenemos que hacer justo lo siguiente:
Descargar imagen de muestra
Action Cards Mexder
Action Card 1
Lorem ipsumLorem ipsum, dolor sit amet consectetur adipisicing elit.
Ver másAction Card 2
Lorem ipsumLorem ipsum, dolor sit amet consectetur adipisicing elit.
Ver más
Si lo que necesita es agregar más Actions Cards y necesita agregar las imagenes
respectivas para el fondo, debe hacer lo siguiente:
El div que contiene la clase
.front
tiene el atributo style donde se debera aplicar la imagen necesaria
Action Cards CCV
Medidas que conforman el sistema de Riesgos
¿Qué son los Fondos de Garantía de la CCV?
Si lo que necesita es agregar más Actions Cards y necesita agregar las imagenes
respectivas para el fondo, debe hacer lo siguiente:
El div que contiene las siguientes clases
.img .img1
Sera el div donde se visualizará la imagen de la cabecera, por lo siguiente si se desean agregar
mas Action Cards esta sera la forma de hacerlo, el primer card debera ser .img .img1
el siguiente card debera ser .img .img2 y
asi sucesivamente, Ahora para mostrar dichas imagenes tenemos que hacer justo lo siguiente:
Descargar imagen de muestra
Botones Asigna
-
Manera en la que pueden hacer uso de las clases:
- btn_outline_white
- btn_outline_dark
- btn_darkblue
- btn_dark_downlad
- btn_green_downlad
Botones MexDer
-
Manera en la que pueden hacer uso de las clases:
- btn_outline_white
- btn_outline_dark
- btn_darkblue
- btn_dark_downlad
Descargar
Botones CCV
-
Manera en la que pueden hacer uso de las clases:
- btn_outline_white
- btn_outline_dark
- btn_darkblue
- btn_dark_downlad
Media Query's Recomendadas
-
Manera en la que pueden hacer uso de las Media Query's:
- TABLET HORIZONTAL (LG revisamos en 1024px)
- TABLET VERTICAL (MD revisamos en 768px)
- MÓVIL HORIZONTAL (SM revisamos en 576px)
- MÓVIL VERTICAL (revisamos en 320px)