Guide de style

Cela représente les styles de base du thème.

Color

Neutral / Gray Scale

Black

var(--color-black)

          

          

            

            
Neutral 900

            
var(--color-neutral-900)

            

          

          

            

            
Neutral 800

            
var(--color-neutral-800)

            

          

          

            

            
Neutral 700

            
var(--color-neutral-700)

            

          

          

            

            
Neutral 600

            
var(--color-neutral-600)

            

          

          

            

            
Neutral 500

            
var(--color-neutral-500)

            

          

          

            

            
Neutral 400

            
var(--color-neutral-400)

            

          

          

            

            
Neutral 300

            
var(--color-neutral-300)

            

          

          

            

            
Neutral 200

            
var(--color-neutral-200)

            

          

          

            

            
Neutral 100

            
var(--color-neutral-100)

            

          

          

            

            
White

            
var(--color-white)

            

          

        

        
Primary Colors

        

          

            

            
Color Primary 400

            
var(--color-primary-400)

            

          

        

        
Support + Utility Colors

        

          

            

            
Success 400

            
var(--color-success-400)

            

          

          

            

            
Success 300

            
var(--color-success-300)

            
var(--color-success)

            

          

          

            

            
Success 200

            
var(--color-success-200)

            

          

          

            

            
Success 100

            
var(--color-success-100)

            

          

          

          

            

            
Error 400

            
var(--color-error-400)

            

          

          

            

            
Error 300

            
var(--color-error-300)

            
var(--color-error)

            

          

          

            

            
Error 200

            
var(--color-error-200)

            

          

          

            

            
Error 100

            
var(--color-error-100)

            

          

        

      

      

        
Buttons

        
Button Regular

        

          

            
            
.btn-primary

          

          

            
            
.btn-secondary

          

          

            
            
.btn-tertiary

          

          

            
            
.btn-cta

          

        

        
Button Small

        

          

            
            
.btn-primary.btn-sm

          

          

            
            
.btn-secondary.btn-sm

          

          

            
            
.btn-tertiary

          

          

            
            
.btn-cta.btn-sm

          

        

        
Button Large

        

          

            
            
.btn-primary.btn-lg

          

          

            
            
.btn-secondary.btn-lg

          

          

            
            
.btn-tertiary

          

          

            
            
.btn-cta.btn-lg

          

        

        
Button Full

        
        
.btn-primary.btn-full

        

        
Disabled Buttons

        

          

            
            
.btn-primary[disabled]

          

          

            
            
.btn-secondary[disabled]

          

          

            
            
.btn-tertiary[disabled]

          

          

            
            
.btn-cta[disabled]

          

        

        
Icon Buttons

        
There is a button snippet to make including buttons with icons easier

        
{ % render 'button', class: 'btn-secondary btn-sm', btn_text: 'Learn More', has_icon: true, icon_name: 'caret-right', button_link: 'https://google.com/' % }

        

          

            

  

  Primary
  
    
      

    
  

  


          

          

            

  

  Secondary Caret
  
    
      

    
  

  


          

          

            

  

  Tertiary Caret
  
    
      

    
  

  


          

          

            

  

  CTA Button
  
    
      

    
  

  


          

        

      

      

        
Typography

        
Fonts

        

          

            
Instrument Serif

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-heading
            
"Instrument Serif", sans-serif;

          

          

            
Instrument Sans

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            var(--font-family-base)
            
"Instrument Sans"

          

          

            
Istrument Sans

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            var(--font-family-base-bold)
            
"Instrument Sans Bold"

          

        

        

        
Header Styles

        
H1 Header style

        
.heading-1

        
H2 Header style

        
.heading-2

        
H3 Header style

        
.heading-3

        
H4 Header style

        
.heading-4

        
H5 Header style

        
.heading-5

        
H6 Header Style

        
.heading-6

        

        
Paragraph Styles

        

          

            
Paragraph Default

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

            
class="bold": font-weight: 700
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake.

            
Link inside body copy should look like this.

          

          

            
Paragraph Small

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

        

        

        

          

            
Paragraph Large

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

        

        

        
blockquote

        

          
Remember, if you don't do it this year, you'll be one year older when you do.

        

        
Caption

      

      

        
Theming

          
.theme-light

          
Text Primary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          
Text Secondary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link


          Badge
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

          

            

              

                
                
              

              

                
                
              

            

          

        

          
.theme-dark

          
Text Primary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          
Text Secondary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link


          Badge
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

          

            

              

                
                
              

              

                
                
              

            

          

        

          
.theme-primary

          
Text Primary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          
Text Secondary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link


          Badge
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

          

            

              

                
                
              

              

                
                
              

            

          

        

          
.theme-secondary

          
Text Primary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          
Text Secondary: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link


          Badge
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

          

            

              

                
                
              

              

                
                
              

            

          

        

      

        
Forms

        

          

            
Theme Light

            

              

                

                  
                  
                

                

                  
                  
                  This field is required.
                

              

              

                
                
              

              

                
                
              

              

                
                

                  
                  

                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  Radio Buttons
                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                    This field is required.
                  

                

              

              

                
                
                
              

            

            
Alerts

            

              

                
 Default Alert

              

              

                
 Error Alert

                
Additional Error Content

              

              

                
 Success Alert

              

            

          

          

            
Theme Dark

            

              

                

                  
                  
                

                

                  
                  
                  This field is required.
                

              

              

                
                
              

              

                
                
              

              

                
                

                  
                  

                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  
                  
                

              

              

                

                  Radio Buttons
                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                  

                  

                    
                    
                    This field is required.
                  

                

              

              

                
                
                
              

            

            
Alerts

            

              

                
 Default Alert

              

              

                
 Error Alert

                
Additional Error Content

              

              

                
 Success Alert

              

            

          

        

      

      

        
Iconography

        
Snippet usage:
        
{ % render 'icon-user' % }

        
If in a loop:  
{ % include 'icon-user' % }


        
General Icons - 24px
  • 

  • 

  • 
  

  • 
  

  • 

  • 

  • 

  • 

  • 

  • 

  • 
  
  

  • 


          
UI Icons - 24px
  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 
  

  • 
  

  • 

  • 
  
  

  • 


          
Social Icons - 24px
  • 
  

  • 
  

  • 
  

  • 
  

  • 

  • 

  • 
  

  • 
  

  • 
  


            
Info Icons - 16px

              
Player Icons - 32px
  • 

  • 


        
Customer Support Icons
  • 
  


      

    

    

      

        
Container & Spacing

      

      

        

          
Container Full

          
.container

        

      

      

        

          
Container Extra Large

          
.container-xl

        

      

      

        

          
Container Large

          
.container-lg

        

      

      

        

          
Container Medium

          
.container-md

        

      

      

        

          
Container Small

          
.container-sm

        

      


      

        

          
Spaced Section

          
.stacked-component

        

      

      

        

          
Another Spaced Section, Medium Spacing

          
.stacked-component.spacing-md

        

      

      

        

          
Stacked Spaced Sections, Spacing Small, Same Theme

          
.stacked-component.spacing-sm

        

      

      

        

          
This section has no padding-top

          
.stacked-component.spacing-sm + .stacked-component.spacing-sm