guideline.md

Colors

    primary: '#000000'
    secondary: '#000000'
    borderColor: '#000000',
    textColor: '#000000'

Actions: button, a

  attribute: '<button></button>'
  classes: 'button-primary, button-secondary, button-outlined'
  sizes: 'base, md, lg'
  
  .button-primary {
      border: 1px solid $borderColor;
      background-color: $primaryColor;
      padding: 5px;
  }
  
  .button-primary.md{
      padding: 10px;
  }

   attribute: '<a></a>'
   classes: 'link-primary, link-secondary, link-outlined'

Texts: h1, h2, h3, h4, h5, h6, pragraph

h1 - Heading one (the biggest text size in figma for the specific project)
classes: heading-one, ... 
colored Texts: 'text-primary, ...'

.heading-one {
    text-size: 8rem;
    line-height: 8
}

Grid

Use bootstrap grid

Spaces

  classes: space, space-md, space-lg

Inputs: Input, Textarea, select, checkbox, radio

  attribute: 
  classes: 
  sizes: 

Card

  attribute: 
  classes: 
  sizes: 

Icons

  attribute: 
  classes: 
  sizes: 

Table

  attribute: 
  classes: 
  sizes: 

Tabs

  attribute: 
  classes: 
  sizes: 

Steps

  attribute: 
  classes: 
  sizes: 

Carousels, Sliders: Use Swiper JS

    This Library supports react, vue, pure js