Appointments
Red and in Spanish

This is the Mindbody appointment component utilizing the modern theme recently released in 2023. The new theme is ready to use out of the box while also supporting many configuration options. Here we show how you can use the Custom CSS box in the Branded Web Manager to customize the widget to fit your branding.
Next Demo
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</article>

      </main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>
  
<section
  data-test="page-section"
  
  data-section-theme="dark"
  class='page-section 
    
      full-bleed-section
      layout-engine-section
    
    background-width--full-bleed
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--top
    
    dark'
  
  data-section-id="650ddfcac8520d41757b5553"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--custom&quot;,
&quot;customSectionHeight&quot;: 71,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--top&quot;,
&quot;contentWidth&quot;: &quot;content-width--wide&quot;,
&quot;customContentWidth&quot;: 50,
&quot;sectionTheme&quot;: &quot;dark&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: {
&quot;type&quot;: &quot;none&quot;
},
&quot;divider&quot;: {
&quot;enabled&quot;: false
},
&quot;typeName&quot;: &quot;page&quot;
}"
  data-animation="none"
  data-fluid-engine-section
   
     style="min-height: 71vh;" 
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
           padding-bottom: calc(71vmax / 5);
        
    '
  >
    <div
      class="content"
      
    >
      
      <div data-fluid-engine="true"><style>

.fe-650ddfcac8520d41757b5552 {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 11.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (8 - 1)) ) / 8 );

  display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(3,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11.0px;
  column-gap: 11.0px;
}

@media (min-width: 768px) {
  .background-width--inset .fe-650ddfcac8520d41757b5552 {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

  .fe-650ddfcac8520d41757b5552 {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 11.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

    --row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

    grid-template-rows: repeat(2,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

  .fe-block-e38b84a2d82e50f642a8 {
    grid-area: 1/2/4/10;
    z-index: 0;

    @media (max-width: 767px) {
      
    }
  }

  .fe-block-e38b84a2d82e50f642a8 .sqs-block {
    justify-content: flex-start;
  }

  .fe-block-e38b84a2d82e50f642a8 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

  @media (min-width: 768px) {
    .fe-block-e38b84a2d82e50f642a8 {
      grid-area: 1/2/3/26;
      z-index: 0;

    }

    .fe-block-e38b84a2d82e50f642a8 .sqs-block {
      justify-content: flex-start;
    }

    .fe-block-e38b84a2d82e50f642a8 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

</style><div class="fluid-engine fe-650ddfcac8520d41757b5552"><div class="fe-block fe-block-e38b84a2d82e50f642a8"><div class="sqs-block html-block sqs-block-html" data-blend-mode="NORMAL" data-block-type="2" data-border-radii="&#123;&quot;topLeft&quot;:&#123;&quot;unit&quot;:&quot;px&quot;,&quot;value&quot;:0.0&#125;,&quot;topRight&quot;:&#123;&quot;unit&quot;:&quot;px&quot;,&quot;value&quot;:0.0&#125;,&quot;bottomLeft&quot;:&#123;&quot;unit&quot;:&quot;px&quot;,&quot;value&quot;:0.0&#125;,&quot;bottomRight&quot;:&#123;&quot;unit&quot;:&quot;px&quot;,&quot;value&quot;:0.0&#125;&#125;" id="block-e38b84a2d82e50f642a8"><div class="sqs-block-content">

<div class="sqs-html-content">
  <p style="text-align:center;white-space:pre-wrap;" class="">Developed with ❤️ by the Branded Web team @ Mindbody</p>
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

    </div>

    <script defer="true" src="https://static1.squarespace.com/static/vta/5c5a519771c10ba3470d8101/scripts/site-bundle.c2cfdab736232e04f74312eb76d23dfe.js" type="text/javascript"></script>
    
  </body>
</html>
AppointmentsRed and in Spanish

Appointments
Red and in Spanish
