Webwolf v1.3

Buttons

Button/Link component

Button-link should be used in all cases where the interaction is related to linking and redirecting to other pages.

Link/Text

Example of a button with text only.

Button text
Link/Icon

Example of a button with icon only.

Link/Text-icon

Example of a button with text and icon.

Button text

Button/Button component

Button-button should be used in all cases where the interaction is related to triggering an action on current page, such as modal opening, slide change, etc.

All buttons have additional [action=""] attribute that might be used in custom functions triggering an interaction. E.g. action="modal-open"

Button/Text

Example of a button with text only.

Button/Icon

Example of a button with icon only.

Button/Text-icon

Example of a button with text and icon.

Button style variants

All style variants are being used in all buttons, no matter if its a Button or Link (a) tag.

Button/Main
button-variant="secondary"
Button text
Button/Main
button-variant="secondary"
Button text
Button/Main
button-variant="text"
Button text
Button/Main
button-variant="large"
Button text
Button text
Button/Main
button-variant="large quote"

Button icon order

Button/Main
button-order="right"
Button text
Button/Main
button-order="left"
Button text

Icons

Whenever we use icons in our projects we add their paths to .global_code_icons embed (included in Global/Code component), and call them out adding their specific IDs to Icon component. Icons are mostly used in buttons but might be placed anywhere on the page.

The size and color of an icon is determined by its parent using icon-size and font-color class or by adding the size or color to the component override fields. Add specific values or use variables for that purpose.

Icon components

Icon/Universal
Icon/Menu

Icon instances

#chevron-up
#chevron-right
#chevron-down
#chevron-left
#arrow-up
#arrow-right
#arrow-down
#arrow-left
#search
#x
#play
#pause

Brand assets

Place for brand related components. Create different variants of logo, logotype, logo mark for global usage (such as navigation, footer and other.

Logo component

Brand/Logo

Building blocks

Text componets

Building-blocks/Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button text
Building-blocks/Heading H1

Your heading goes here

Building-blocks/Heading H2

Your heading goes here

Building-blocks/Heading H3

Your heading goes here

Building-blocks/Heading H4

Your heading goes here

Building-blocks/Heading H5
Your heading goes here
Building-blocks/Heading H6
Your heading goes here
Building-blocks/Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Building-blocks/Bullets
  • Item A
  • Item B
  • Item C
Building-blocks/Button-group

Card components

Building-blocks/Card

Your heading goes here

Your heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button text

Your heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Building-blocks/Card-Link

Your heading goes here

Visuals

Visual/Image
Visual/Video

Global components

Navbar fixed wrapper

nav-fixed

Navbar

Global/Navbar
Skip to main

Footer

Global/Footer

Construyamos su solución juntos

Detalles del proyecto
Acerca de usted
¡Manos a la obra!
Hemos recibido tus datos y nos pondremos en contacto contigo en breve con más información.
Ver proyectos recientes
Oops! Something went wrong while submitting the form.
  • infrared training center certification
  • etap certification
  • aee certification
© 2025 Kotkoff. All Rights Reserved.
Made by Netguru
Spanish
English

Sliders

Swiper (starter)

Swiper starter component will help you implement sleak sliders based on swiper.js library. Simply drag&drop it anywhere, use visibility to choose which elements to use, unlink component and replace list with your content (either static or CMS collection). Do not forget to edit script in embed code_js.

Remember to pick a unique name for each slider function (use camelCase) and delete unnecessary properties. Additionally add proper swiper combo classes to each element (wrapper = swiper; list = swiper-wrapper; item = swiper-slide) or use custom classes as you specify in the script embed element.

swiper
swiper-wrapper
swiper-slide
swiper-scrollbar
swiper-scrollbar-drag
swiper-pagination-bullet
swiper-paginagion-bullet-active

  • Your heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • Your heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • Your heading goes here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Code components

Starter components for all custom CSS and JS embeds. Drag & drop, unlink and edit custom code inside embed.

Code components

Feel free to use predefined code components as a starting point when adding custom CSS or JS. Simply add component to relevant section, unlink, and you are good to go from there.
‍
*IMPORTANT NOTE:
When using Code/JS component, remember to give a unique name to the function you are adding. Use camelCase for it to work properly.

Code/CSS
Code/JS

Your heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • Item A
  • Item B
  • Item C
  • Item A
  • Item B
  • Item C
  • Item A
  • Item B
  • Item C