<div class="row" sf-type="container" sf-label="Row">
<div class="col-6" sf-type="container" sf-label="Column">
<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Column 1 inner</div>
</div>
<div class="col-6" sf-type="container" sf-label="Column">
<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Column 2 inner</div>
</div>
</div>
<div class="col-12" sf-type="container" sf-label="Column">
<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Put this column inside the "Row" element</div>
</div>
<div sf-type="container" sf-label="Container"></div>
<h2 sf-type="text" sf-label="Heading">My heading text</h2>
<p sf-type="text" sf-label="Paragraph">Some text <br> with multiple lines in it.</p>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-dark-1" sf-type="svg" sf-label="SVG icon">
<path d="M17.394 13.046L7.8495 18.584C7.0395 19.0535 6 18.485 6 17.5385V6.46252C6 5.51752 7.038 4.94752 7.8495 5.41852L17.394 10.9565C17.5783 11.0617 17.7314 11.2138 17.8379 11.3972C17.9445 11.5807 18.0006 11.7891 18.0006 12.0013C18.0006 12.2134 17.9445 12.4218 17.8379 12.6053C17.7314 12.7888 17.5783 12.9408 17.394 13.046Z"/>
</svg>
<img src="i/editor-demo-img.png" srcset="i/editor-demo-img@2x.png 2x" alt="" class="img-fluid" sf-type="img" sf-label="Image" />
<div sf-type="container" sf-label="Video" class="position-relative">
<img src="i/editor-demo-video-poster.png" srcset="i/editor-demo-video-poster@2x.png 2x" alt="" sf-type="img" sf-label="Video poster" class="img-fluid">
<a href="#" sf-type="link-container" sf-label="Play Button" class="btn btn-width-equal-height btn-action-1 position-absolute translate-middle top-50 start-50 rounded-circle" data-bs-toggle="modal" data-bs-target="#_random_id_">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-light-1" sf-type="svg" sf-label="Play icon">
<path d="M17.394 13.046L7.8495 18.584C7.0395 19.0535 6 18.485 6 17.5385V6.46252C6 5.51752 7.038 4.94752 7.8495 5.41852L17.394 10.9565C17.5783 11.0617 17.7314 11.2138 17.8379 11.3972C17.9445 11.5807 18.0006 11.7891 18.0006 12.0013C18.0006 12.2134 17.9445 12.4218 17.8379 12.6053C17.7314 12.7888 17.5783 12.9408 17.394 13.046Z">
</path>
</svg>
</a>
<div sf-type="container" sf-label="Modal with video" class="modal fade" id="_random_id_" tabindex="-1">
<a href="#" sf-type="link-container" sf-label="Close Modal" class="btn btn-sm btn-width-equal-height position-fixed top-0 end-0 zi-5 rounded-circle btn-bg-3 mt-4 me-4" data-bs-dismiss="modal">
<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-dark-1" sf-label="Close icon" sf-type="svg">
<path d="M8.9398 8L13.1398 3.80667C13.2653 3.68113 13.3359 3.51087 13.3359 3.33333C13.3359 3.1558 13.2653 2.98554 13.1398 2.86C13.0143 2.73447 12.844 2.66394 12.6665 2.66394C12.4889 2.66394 12.3187 2.73447 12.1931 2.86L7.9998 7.06L3.80646 2.86C3.68093 2.73447 3.51066 2.66394 3.33313 2.66394C3.1556 2.66394 2.98533 2.73447 2.8598 2.86C2.73426 2.98554 2.66374 3.1558 2.66374 3.33333C2.66374 3.51087 2.73426 3.68113 2.8598 3.80667L7.0598 8L2.8598 12.1933C2.79731 12.2553 2.74771 12.329 2.71387 12.4103C2.68002 12.4915 2.6626 12.5787 2.6626 12.6667C2.6626 12.7547 2.68002 12.8418 2.71387 12.9231C2.74771 13.0043 2.79731 13.078 2.8598 13.14C2.92177 13.2025 2.99551 13.2521 3.07675 13.2859C3.15798 13.3198 3.24512 13.3372 3.33313 13.3372C3.42114 13.3372 3.50827 13.3198 3.58951 13.2859C3.67075 13.2521 3.74449 13.2025 3.80646 13.14L7.9998 8.94L12.1931 13.14C12.2551 13.2025 12.3288 13.2521 12.4101 13.2859C12.4913 13.3198 12.5785 13.3372 12.6665 13.3372C12.7545 13.3372 12.8416 13.3198 12.9228 13.2859C13.0041 13.2521 13.0778 13.2025 13.1398 13.14C13.2023 13.078 13.2519 13.0043 13.2857 12.9231C13.3196 12.8418 13.337 12.7547 13.337 12.6667C13.337 12.5787 13.3196 12.4915 13.2857 12.4103C13.2519 12.329 13.2023 12.2553 13.1398 12.1933L8.9398 8Z">
</path>
</svg>
</a>
<div sf-type="container" sf-label="Modal dialog" class="modal-dialog modal-fullscreen">
<div sf-type="container" sf-label="Modal content" class="modal-content bg-transparent">
<div sf-type="container" sf-label="Modal body" class="modal-body d-flex align-items-center justify-content-center">
<div sf-type="container" sf-label="container" class="container d-flex justify-content-center align-items-center">
<div sf-type="container" sf-label="Video wrapper" class="ratio ratio-16x9">
<iframe sf-type="container" sf-label="YouTube video" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen="">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="_random_id_" class="carousel carousel-dark carousel-arrows-circled slide" data-bs-interval="false" sf-type="container" sf-label="Carousel">
<div class="carousel-indicators carousel-indicators-dots" sf-type="container" sf-label="Indicators">
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="0" class="active" sf-type="btn" sf-label="Indicator for slide 1"></button>
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="1" sf-type="btn" sf-label="Indicator for slide 2"></button>
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="2" sf-type="btn" sf-label="Indicator for slide 3"></button>
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="3" sf-type="btn" sf-label="Indicator for slide 4"></button>
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="4" sf-type="btn" sf-label="Indicator for slide 5"></button>
<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="5" sf-type="btn" sf-label="Indicator for slide 6"></button>
</div>
<div class="d-flex align-items-stretch carousel-inner" style="min-height:40rem;" sf-type="container" sf-label="Slides">
<div class="float-none carousel-item active" sf-type="container" sf-label="Slide 1">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-3" sf-type="container" sf-label="Background"></div>
<div class="top-0 bottom-0 overflow-auto text-dark-1 fs-3 text-start carousel-caption" sf-type="container" sf-label="Caption">
<h2 class="mb-4 display-6 text-dark-1" sf-type="text" sf-label="Heading">Tips & tricks</h2>
<p class="fs-1" sf-type="text" sf-label="Text">
Here are some tips on how to customize this carousel. <br>
Please, read if you working with the carousel for the first time.
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Active slide</h4>
<p sf-type="text" sf-label="Text">
You must mark some of your slides as active. Otherwise, the carousel will not work (because it shows only the active slide).
</p>
<p sf-type="text" sf-label="Text">
To do that, choose <strong>Slide-X</strong> in the left panel, go to the <strong>Advanced</strong> tab in the right column and add an <code>active</code> class to the chosen slide. If you're using indicators, you should also add an <code>active</code> class to one of the indicators. e.g. <strong>Slide 2</strong> and <strong>Indicator for slide 2</strong> should have an <code>active</code> class
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Height of the carousel</h4>
<p sf-type="text" sf-label="Text">
We've set the minimal height of the carousel equals to 40rem (640px). The minimal height is set to make all slides have an equal height which prevents page height from squeezing/leaping while changing the slides (if they have a different height). <br>
To change this minimal height, choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and change the <code>40rem</code> value for the <code>style</code> attribute.
</p>
<p sf-type="text" sf-label="Text">
If you want to make the height of a carousel equal to the height of the screen, change the <code>40rem</code> value to <code>100vh</code>. The <strong>vh</strong> units are relative to the screen size. So <code>100vh</code> is 100% of a screen height, <code>80vh</code> is 80% of a screen height.
</p>
<p sf-type="text" sf-label="Text">
You can also move the carousel outside the <strong>Bootstrap Container</strong> element to make it screen-wide.
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Dark/light controls</h4>
<p sf-type="text" sf-label="Text">
You can switch between light or dark controls.
</p>
<p sf-type="text" sf-label="Text">
Choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and add or remove the <code>carousel-dark</code> class.
</p>
<p sf-type="text" sf-label="Text">
You can also toggle on/off circles under the <strong>Previous</strong>/<strong>Next</strong> buttons by adding/removing the <code>carousel-arrows-circled</code> class for the <strong>Carousel</strong> element.
</p>
<p sf-type="text" sf-label="Text">
You can simply remove the <strong>Control - Previous</strong> and <strong>Control - Next</strong> elements if you don't need to use them.
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Carousel indicators</h4>
<p sf-type="text" sf-label="Text">
The number of indicators must be the same as the number of slides. That means that if you're adding a new slide, you should also add an indicator for it.
</p>
<p sf-type="text" sf-label="Text">
Each indicator points to the slide it's connected with via the <code>data-bs-slide-to</code> attribute. The enumeration <strong>starts from 0</strong>. That means that the indicator pointing to the first slide has a<code>data-bs-slide-to</code> attribute with the <strong>0</strong> value and the indicator pointing to the third slide has a<code>data-bs-slide-to</code> attribute with the <strong>2</strong> value.
</p>
<p sf-type="text" sf-label="Text">
So, the regular workflow of adding the new slide is:<br>
Choose the last slide in the left panel and clone it;<br>
Choose the last indicator in the left panel and clone it;<br>
Choose the newly created indicator, go to the <strong>Advanced</strong> tab, and increase the value of the <code>data-bs-slide-to</code> attribute on 1.
</p>
<p sf-type="text" sf-label="Text">
You can simply remove the <strong>Indicators</strong> container if you don't need to use them.
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Fade/Slide effect</h4>
<p sf-type="text" sf-label="Text">
You can switch between fade or slide effects.
</p>
<p sf-type="text" sf-label="Text">
Choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and add or remove the <code>carousel-fade</code> class.
</p>
<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Autoplay</h4>
<p sf-type="text" sf-label="Text">
You can make carousel cycle slides automatically.
</p>
<p sf-type="text" sf-label="Text">
To enable autoplay, choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and set the <code>data-bs-interval</code> attribute value to <code>5000</code>. The 5000 is the 5000ms = 5s. That means that the carousel will change slides every 5 seconds. You can change this value as you want. Set the value to <code>false</code> to disable autoplay.
</p>
<p sf-type="text" sf-label="Text">
Then add the <code>data-bs-ride</code> attribute with value <code>carousel</code>. It will start cycling slides after the page load.
</p>
<p sf-type="text" sf-label="Text">
Then press <strong>Save & Close</strong> button and refresh the page to apply changes.
</p>
<p sf-type="text" sf-label="Text">
You can find some more useful options here: https://getbootstrap.com/docs/5.0/components/carousel/#options
</p>
</div>
</div>
<div class="float-none carousel-item" sf-type="container" sf-label="Slide 2">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-repeat-none bg-position-center bg-size-contain" sf-type="container" sf-label="Background" data-bg-src="i/ecommerce-10.png" data-bg-src-2x="i/ecommerce-10@2x.png" style="background-color:#f4f5f6;"></div>
<div class="carousel-caption" sf-type="container" sf-label="Caption">
<h4 class="text-dark-1" sf-type="text" sf-label="Heading">Image - fit</h4>
<p class="mb-0 fs-4 text-dark-1" sf-type="text" sf-label="Text">
This image will always fit to the height / width of a slide.<br> Use it if you want to show some item or person.
</p>
</div>
</div>
<div class="float-none carousel-item" sf-type="container" sf-label="Slide 3">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-3 bg-repeat-none bg-position-center bg-size-cover" sf-type="container" sf-label="Background" data-bg-src="i/editor-demo-slide-bg.jpg" data-bg-src-2x="i/editor-demo-slide-bg@2x.jpg"></div>
<div class="carousel-caption" sf-type="container" sf-label="Caption">
<h4 class="text-dark-1" sf-type="text" sf-label="Heading">Image - cover</h4>
<p class="mb-0 fs-4 text-dark-1" sf-type="text" sf-label="Text">
This image will always cover the slide. <br>That means that it will be stretched to fill the slide.
</p>
</div>
</div>
<div class="float-none carousel-item" sf-type="container" sf-label="Slide 4">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
<div class="carousel-caption" sf-type="container" sf-label="Caption">
<h2 class="mb-4 display-4 text-dark-1" sf-type="text" sf-label="Heading">Orange</h2>
<p class="mb-0 text-dark-1 fs-1" sf-type="text" sf-label="Text">
This slide has an "action-7" background color which is close to the "Orange" color. <br>
You can change the color of a background or set some image to it.
</p>
</div>
</div>
<div class="float-none carousel-item" sf-type="container" sf-label="Slide 5">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-8" sf-type="container" sf-label="Background"></div>
<div class="carousel-caption" sf-type="container" sf-label="Caption">
<h2 class="mb-4 display-4 text-dark-1" sf-type="text" sf-label="Heading">Lime</h2>
<p class="mb-0 text-dark-1 fs-1" sf-type="text" sf-label="Text">
This slide has an "action-8" background color which is close to the "Lime" color. <br>
You can change the color of a background or set some image to it.
</p>
</div>
</div>
<div class="float-none carousel-item" sf-type="container" sf-label="Slide 6">
<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-1" sf-type="container" sf-label="Background"></div>
<div class="top-0 bottom-0 d-flex align-items-center justify-content-center carousel-caption" sf-type="container" sf-label="Caption">
<div sf-type="container" sf-label="Container">
<h2 class="mb-4 display-5 text-light-1" sf-type="text" sf-label="Heading">Dark slide. <br>Vertically-centered text.</h2>
<p class="mb-0 text-light-1 fs-2" sf-type="text" sf-label="Text">
This slide caption is also centered verticaly. <br>
Please, remove the bottom margin for the last element in the caption for correct positioning.
</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#_random_id_" data-bs-slide="prev" sf-type="link-container" sf-label="Control - Previous">
<span class="carousel-control-prev-icon" aria-hidden="true" sf-type="container" sf-label="Icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#_random_id_" data-bs-slide="next" sf-type="link-container" sf-label="Control - Next">
<span class="carousel-control-next-icon" aria-hidden="true" sf-type="container" sf-label="Icon"></span>
</button>
</div>
<a href="#" sf-type="link" sf-label="Text link">Link text</a>
<a href="#" sf-type="link-container" sf-label="Link-container">
<div sf-type="text" sf-label="Unnamed text">You can put any element inside this link-container <b>except</b> another links/link-containers. Anything inside this container will be clickable.</div>
</a>
<a href="#" class="btn btn-action-1" sf-type="btn" sf-label="Button">Button text</a>
<div class="d-inline-block dropdown" sf-type="container" sf-label="Dropdown">
<button class="btn btn-sm btn-action-1 dropdown-toggle" type="button" id="_random_id_" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" sf-type="btn" sf-label="Button">Open Dropdown</button>
<ul class="dropdown-menu" aria-labelledby="_random_id_" sf-type="container" sf-label="Dropdown body">
<li sf-type="container" sf-label="Item">
<a class="dropdown-item" href="#" sf-type="link" sf-label="Link">Link</a>
</li>
<li sf-type="container" sf-label="Item">
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" sf-type="link" sf-label="Link">Documentation</a>
</li>
<li sf-type="container" sf-label="Item">
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" sf-type="link" sf-label="Link">All dropdown options</a>
</li>
<li sf-type="container" sf-label="Item">
<hr class="dropdown-divider" sf-type="container" sf-label="Divider">
</li>
<li sf-type="container" sf-label="Item">
<span class="dropdown-item-text" sf-type="text" sf-label="Text">Just a text</span>
</li>
<li sf-type="container" sf-label="Item">
<a class="dropdown-item disabled" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" tabindex="-1" aria-disabled="true" sf-type="link" sf-label="Link">Disabled link</a>
</li>
</ul>
</div>
<form action="form-handler.php" method="post" enctype="multipart/form-data" class="js-ajax-form" sf-type="form" sf-label="Form">
<!-- forms alerts -->
<div class="alert alert-action-8 fixed-top invisible fade js-ajax-form-result" data-result="success" role="alert" sf-type="container" sf-label="Submit result - success">
<span class="js-ajax-form-alert-text" data-default-text="Thanks for your message!" sf-type="text" sf-label="Text">Thanks for your message!</span>
</div>
<div class="alert alert-action-5 fixed-top invisible fade js-ajax-form-result" data-result="error" role="alert" sf-type="container" sf-label="Submit result - error">
<span class="js-ajax-form-alert-text" sf-type="text" sf-label="Text">Error!</span>
</div>
<!-- forms alerts end -->
<div class="row justify-content-center text-start" sf-type="container" sf-label="Row">
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
<input type="text" name="name" placeholder="Your name" class="form-control" sf-type="input" sf-label="Input" />
</div>
<div sf-type="container" sf-label="Divider" class="col-12"></div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
<div sf-type="container" sf-label="Input group" class="input-group">
<div sf-type="container" sf-label="Input icon" class="input-group-text border-end-0 ps-4 pe-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-dark-3" sf-label="SVG icon" sf-type="svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5002 3.75H2.5002C2.16868 3.75 1.85074 3.8817 1.61632 4.11612C1.3819 4.35054 1.2502 4.66848 1.2502 5V5.27104L10.0002 10.5213L18.7502 5.27098V5C18.7502 4.66848 18.6185 4.35054 18.3841 4.11612C18.1497 3.8817 17.8317 3.75 17.5002 3.75ZM0.000203451 5.64224C-6.77314e-05 5.63161 -6.79025e-05 5.62098 0.000203451 5.61034V5C0.000203451 4.33696 0.263596 3.70107 0.732437 3.23223C1.20128 2.76339 1.83716 2.5 2.5002 2.5H17.5002C18.1632 2.5 18.7991 2.76339 19.268 3.23223C19.7368 3.70107 20.0002 4.33696 20.0002 5V5.61604V5.63397V15C20.0002 15.663 19.7368 16.2989 19.268 16.7678C18.7991 17.2366 18.1632 17.5 17.5002 17.5H2.5002C1.83716 17.5 1.20128 17.2366 0.732437 16.7678C0.263596 16.2989 0.000203451 15.663 0.000203451 15V5.64224ZM18.7502 13.9117V6.72895L12.6801 10.3708L18.7502 13.9117ZM18.7051 15.3329L11.5602 11.165L11.4569 11.1048L10.0002 11.9788L8.54329 11.1049L8.44016 11.165L1.29533 15.3328C1.35239 15.5394 1.46213 15.7297 1.61632 15.8839C1.85074 16.1183 2.16868 16.25 2.5002 16.25H17.5002C17.8317 16.25 18.1497 16.1183 18.3841 15.8839C18.5383 15.7297 18.648 15.5394 18.7051 15.3329ZM1.2502 13.9117V6.73013L7.31989 10.371L1.2502 13.9117Z">
</path>
</svg>
</div>
<input type="email" name="email" placeholder="Your email" class="form-control border-start-0 ps-2" sf-type="input" sf-label="Input" required="required">
</div>
</div>
<div sf-type="container" sf-label="Divider" class="col-12"></div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
<select name="budget" class="form-select" sf-type="select" sf-label="Select">
<option value="" disabled selected sf-type="option" sf-label="Option">Your budget</option>
<option value="<1000" sf-type="option" sf-label="Option">Less than $1000</option>
<option value=">1000" sf-type="option" sf-label="Option">More than $1000</option>
</select>
</div>
<div sf-type="container" sf-label="Divider" class="col-12"></div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
<label class="form-check d-inline-block" sf-type="container" sf-label="Radio">
<input class="form-check-input" type="radio" name="radio" value="radio-value-1" checked sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 1</span>
</label>
</div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
<label class="form-check d-inline-block" sf-type="container" sf-label="Radio">
<input class="form-check-input" type="radio" name="radio" value="radio-value-2" sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 2</span>
</label>
</div>
<div sf-type="container" sf-label="Divider" class="col-12"></div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
<label class="form-check" sf-type="container" sf-label="Checkbox">
<input class="form-check-input" type="checkbox" name="checkbox" sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Text">Checkbox text</span>
</label>
</div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
<label class="form-check form-switch" sf-type="container" sf-label="Switch">
<input class="form-check-input" type="checkbox" name="switch" sf-type="input" sf-label="Input">
<span class="form-switch-wrapper" sf-type="container" sf-label="Wrapper">
<div class="form-switch-pin" sf-type="container" sf-label="Pin"></div>
</span>
<span class="form-check-label" sf-type="text" sf-label="Text">Switch text</span>
</label>
</div>
<div sf-type="container" sf-label="Divider" class="col-12"></div>
<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
<textarea name="message" placeholder="Your message" class="form-control" rows="3" sf-type="textarea" sf-label="Textarea"></textarea>
</div>
</div>
<button class="btn btn-action-1" sf-type="btn" sf-label="Form submit">Submit</a>
</form>
<input type="text" name="name" placeholder="Your name" class="form-control" sf-type="input" sf-label="Input" />
<textarea name="message" placeholder="Your message" class="form-control" rows="3" sf-type="textarea" sf-label="Textarea"></textarea>
<select name="budget" class="form-select" sf-type="select" sf-label="Select">
<option value="" disabled selected sf-type="option" sf-label="Option">Your budget</option>
<option value="<1000" sf-type="option" sf-label="Option">Less than $1000</option>
<option value=">1000" sf-type="option" sf-label="Option">More than $1000</option>
</select>
<label class="form-check" sf-type="container" sf-label="Checkbox">
<input class="form-check-input" type="checkbox" name="checkbox" sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Text">Checkbox text</span>
</label>
<label class="form-check" sf-type="container" sf-label="Radio">
<input class="form-check-input" type="radio" name="radio" value="radio-value-1" checked sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 1</span>
</label>
<label class="form-check" sf-type="container" sf-label="Radio">
<input class="form-check-input" type="radio" name="radio" value="radio-value-2" sf-type="input" sf-label="Input">
<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 2</span>
</label>
<label class="form-check form-switch" sf-type="container" sf-label="Switch">
<input class="form-check-input" type="checkbox" name="switch" sf-type="input" sf-label="Input">
<span class="form-switch-wrapper" sf-type="container" sf-label="Wrapper">
<div class="form-switch-pin" sf-type="container" sf-label="Pin"></div>
</span>
<span class="form-check-label" sf-type="text" sf-label="Text">Switch text</span>
</label>
<button class="btn btn-action-1" sf-type="btn" sf-label="Form submit">Button text</a>