COLORS

.c-*

c-green

c-green-dark

c-yellow

BACKGROUND COLORS

.bgc-*

bgc-green

bgc-cream

FONT WEIGHTS

.fw-*

fw-300

fw-400

fw-500

fw-600

fw-700

FONT SIZES

.fz-*

fz-11

fz-12

fz-14

fz-16

fz-18

fz-20

fz-22

fz-24

fz-25

fz-26

fz-30

fz-34

fz-50

fz-70

fz-90

WYSIWYGS

.wysiwyg

Lorem link sit amet, strong adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut eaque est iste laboriosam nam quas soluta suscipit voluptate! Accusamus adipisci animi beatae consequuntur dicta explicabo molestiae natus, ratione ut!

Lorem ipsum.
Lorem ips.
Lorem ipsu.

Lorem ipsum.
Lorem ips.
Lorem ipsu.

FORMS

.form-control > .form-control__input.show -> Muestra desde un inicio el placeholder y la etiqueta (tag) si la tuviese.

.form-control__input.show + form-control__tag

Correo

.js-form-control__input -> Muestra el placeholder y anima la etiqueta (tag) al hacer focus y permanece así al llenar el campo.

Correo

.form-control (Select)

.form-group > .form-row > .form-col (Ejemplo 1 - sin animación, solo con clase .show)

Correo

.form-group > .form-row > .form-col (Ejemplo 2 - con animación del .js-form-control__input)

Nombre completo

Correo

Teléfono

Marca una opción

.form-checkbox No soy robot .form-checkbox-group

No soy robot Acepto los términos y condiciones Acepto que Pronaturaleza use mis datos para futuras comunicaciones

.form-filters .form-filters (con select)

DOTS

.dot

.dot--active

.dot--tooltip

BUTTONS

.btn .btn--gosth

BUTTONS VISOR

.btn-visor (Bajar)

.btn-visor--white (Subir)

BUTTONS ICO

.btn-ico .btn-ico--cream .btn-ico--green-light .btn-ico--play

.btn-ico--big

LINKS

.link Link .link--green-dark Link green dark .link--yellow

Link yellow

.link--white

Link yellow

.link--ico-first Volver .link--ico-last Ver más .link--ico-hidden Conoce más .link--download Nombre de descargable

NAVS

.nav-icons .nav-row .nav-row (a.active) .nav-column .nav-column--white

MEDIA

.media media--820x430

.media media--760x430

.media media--760x445

.media media--480x270

.media media--270x375

.btn-ico--play

.btn-ico--zoom

SLIDERS

.slider

ACCORDIONS

.acc

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

GRIDS

.grid-data

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

.grid-download

.grid-names

Nombre Apellidos

Cargo

Especialidad

Nombre Apellidos

Cargo

Especialidad

Nombre Apellidos

Cargo

Especialidad

Nombre Apellidos

Cargo

Especialidad

Nombre Apellidos

Cargo

Especialidad

.grid-posts

Nombre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Conoce más

Nombre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Conoce más

Nombre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Conoce más

Nombre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Conoce más

Nombre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Conoce más

.grid-logos

CARDS

.card (Person)

Nombre Apellidos

Cargo
Especialidad
nombre@pronaturaleza.com

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatu enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatu enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid.

.card (Project)

Nombre Proyecto 1

Tipo de proyecto: Economía sostenible
Línea estratégica: Lorem aooooaoaoa
Zona de impacto: Lorem, Ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

.card (Convocatoria)

Convocatoria 1

Lugar: Lorem Epsom sit adore
Fecha límite: 30 de diciembre 2021

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Nombre de descargable

ORGANISMS

.flexible

Nombre Proyecto 1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.

Fecha: 01/01/2021
Tipo de proyecto: Economía sostenible
Línea estratégica: Lorem aooooaoaoa
Zona de impacto: Lorem, Ipsum

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

500

Lorem ectetuer adipiscing elit, sed

Beneficios: Sed ut perspiciatis unde omnis iste
Fuente Cooperante: Lorem ipsum
Coordinador: Maerei Erer del Pyderet
Equipo: Lorem Ipsum, Iseureo Nrery, Loqyeru Naueue, Anbeyre Aerer, Verere Nauere

Link