@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/templates/Sections/Ui/Docs/Default.latte

@@ -0,0 +1,1059 @@
+<section class="s-ui" data-controller="s-ui">
+    <div class="wrp_s_body row">
+        {include '@nav.html'}
+        <div class="col col-right t:col-9 m:col-12 py-12">
+            <div class="container max-4xl:!max-w-full">
+                {include '@intro.html'}
+                <div class="row gap-8 flex-wrap" style="padding-top: 4rem">
+                    <div class="col-12">
+                        <h1 class="ui-title lg uppercase text-primary mb-4">Components</h1>
+                        <div class="ui-text">
+                            <p>Examples of basic components that can be used in Newlogic UI, see <a href="https://winduum.dev" target="_blank">winduum.dev</a> for complete docs.</p>
+                        </div>
+                    </div>
+                    <div class="col-12" id="heading">
+                        <h1 class="ui-heading mb-4">Heading</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/heading.html" target="_blank">ui/heading</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <h2 class="ui-heading lg">Big heading</h2>
+                        {/capture}{$code|code('html', true)|noescape}
+
+                        {capture $code}
+                            <h2 class="ui-heading">Normal heading</h2>
+                        {/capture}{$code|code('html', true)|noescape}
+
+                        {capture $code}
+                            <h2 class="ui-heading sm">Small heading</h2>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="title">
+                        <h1 class="ui-heading mb-4">Title</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/title.html" target="_blank">ui/title</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <strong class="ui-title sm">Title</strong>
+                        {/capture}{$code|code('html', true)|noescape}
+
+                        {capture $code}
+                            <strong class="ui-title lg">Title</strong>
+                        {/capture}{$code|code('html', true)|noescape}
+
+                        {capture $code}
+                            <strong class="ui-title uppercase text-primary">Title</strong>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12 items-start" id="button">
+                        <h1 class="ui-heading mb-4">Button</h1>
+                        <div class="ui-text mb-4">
+                            <p>See <a href="https://winduum.dev/docs/ui/button.html" target="_blank">ui/button</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <button class="ui-btn">
+                                Flat button
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn bordered">
+                                Outline button
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn bordered accent-main">
+                                Outline button - base color
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn max-md:square">
+                                <svg>
+                                    <use href="#icon-at-symbol"></use>
+                                </svg>
+                                <span class="max-md:hidden">Button with icon</span>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                            {capture $code}
+                            <button class="ui-btn accent-main">
+                                Next
+                                <svg>
+                                    <use href="#icon-chevron-right"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                            {capture $code}
+                            <button class="ui-btn accent-main">
+                                <svg>
+                                    <use href="#icon-chevron-left"></use>
+                                </svg>
+                                Previous
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn accent-main">
+                                Continue
+                                <svg>
+                                    <use href="#icon-angle-down"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn square accent-main">
+                                <svg class="icon">
+                                    <use href="#icon-at-symbol"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn circle accent-main">
+                                <svg class="icon">
+                                    <use href="#icon-at-symbol"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn lg circle accent-main">
+                                <svg class="icon">
+                                    <use href="#icon-at-symbol"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn lg">
+                                Large flat button
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-btn loading">
+                                Loading state
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-group">
+                                <button class="ui-btn">
+                                    Flat button
+                                </button>
+                                <button class="ui-btn active">
+                                    Flat button
+                                </button>
+                                <button class="ui-btn">
+                                    Flat button
+                                </button>
+                                <button class="ui-btn">
+                                    Flat button
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-group">
+                                <button class="ui-btn">
+                                    Flat button
+                                </button>
+                                <button class="ui-btn square bg-opacity-80">
+                                    <svg class="icon">
+                                        <use href="#icon-angle-down"></use>
+                                    </svg>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12 items-start" id="link">
+                        <h1 class="ui-heading mb-4">Link</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/link.html" target="_blank">ui/link</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <a href="#" class="ui-link accent-primary" title="">
+                                Show more
+                            </a>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <a href="#" class="ui-link underlined text-primary" title="">
+                                With underline
+                            </a>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <a href="#" class="ui-link underlined-visible text-primary" title="">
+                                With underline
+                            </a>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="control">
+                        <h1 class="ui-heading mb-4">Control</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/control.html" target="_blank">ui/control</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <div class="ui-control">
+                                <select>
+                                    <option selected value="">- select option -</option>
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                                <label>How are you?</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <select>
+                                    <option selected value="">- select option -</option>
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                                <label>With icon</label>
+                                <svg class="icon-l">
+                                    <use href="#icon-at-symbol"></use>
+                                </svg>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <select data-placeholder>
+                                    <option selected value="">- select option -</option>
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control" tabindex="-1" data-controller="ui-control-select">
+                                <select>
+                                    <option selected="" value="">- select an option -</option>
+                                    <option value="1">Option 1</option>
+                                    <option value="2" disabled>Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                                <label>Javascript select</label>
+                                <div aria-hidden="true">
+                                    <div data-option="" tabindex="0">- select option -</div>
+                                    <div data-option="1" tabindex="0">Option 1</div>
+                                    <div data-option="2" data-disabled>Option 2</div>
+                                    <div data-option="3" tabindex="0">Option 3</div>
+                                </div>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <select data-placeholder disabled>
+                                    <option selected value="">Disabled state</option>
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="email" required placeholder="Please fill..">
+                                <label>E-mail</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="tel" placeholder="Tel" />
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="text" required placeholder="Please fill">
+                                <label>Amount</label>
+                                <span class="icon-r" aria-label="Kč"></span>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="tel" disabled>
+                                <label>Disabled state</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <textarea></textarea>
+                                <label>Message</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="color" placeholder="Select color">
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="file" multiple="multiple" title="Upload files" placeholder="Select or drag file(s)">
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="number" min="1" max="99" step="1">
+                                <label>Select number</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="datetime-local">
+                                <label>Select date and time</label>
+                                <div class="icon-r">
+                                    <svg data-action="click->ui-control#showDatepicker">
+                                        <use href="#icon-calendar"></use>
+                                    </svg>
+                                </div>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="date">
+                                <label>Select date</label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control w-28">
+                                <input type="number" placeholder="" value="1" min="1" max="99" step="1">
+                                <div class="icon-r">
+                                    <div aria-label="Kč"></div>
+                                </div>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-control">
+                                <input type="time" placeholder="Select time">
+                                <div class="icon-r">
+                                    <svg data-action="click->ui-control#showPicker">
+                                        <use href="#icon-clock"></use>
+                                    </svg>
+                                </div>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                    </div>
+                    <div class="col-12 items-start" id="check">
+                        <h1 class="ui-heading mb-4">Check</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/check.html" target="_blank">ui/check</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <div class="p-5 bg-gray-200 dark:bg-dark rounded-lg">
+                                <label class="ui-check">
+                                    <input type="checkbox">
+                                    <span>I agree to the <a href="#">processing of personal data</a></span>
+                                </label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="p-5 text-light bg-dark rounded-lg">
+                                <label class="ui-check accent-light" data-theme="dark">
+                                    <input type="checkbox">
+                                    <span>I agree to the <a href="#">processing of personal data</a></span>
+                                </label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="p-5 text-light bg-dark rounded-lg">
+                                <label class="ui-check accent-info">
+                                    <input type="checkbox">
+                                    <span>I agree to the <a href="#">processing of personal data</a></span>
+                                </label>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <label class="ui-check flex-row-reverse">
+                                <input type="checkbox" class="checked:border-primary" style="--ui-checkbox-checked-bg: transparent; --ui-checkbox-checked-fg: var(--color-primary);" />
+                                <span>I agree to the <a href="#">processing of personal data</a></span>
+                            </label>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <label class="ui-check">
+                                <input type="radio" name="radio">
+                                <span>Click on this radio button</span>
+                            </label>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <label class="ui-check">
+                                <input type="checkbox" class="mr-3" />
+                                Without inner span
+                            </label>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <label class="ui-check">
+                                <input type="checkbox">
+                            </label>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <label class="ui-check">
+                                <input type="radio" name="radio">
+                            </label>
+                        {/capture}{$code|code('html', true)|noescape}
+                    </div>
+                    <div class="col col-12" id="notice">
+                        <h1 class="ui-heading mb-4">Notice</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/notice.html" target="_blank">ui/notice</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <div class="ui-notice accent-warning">
+                                Warning notice
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-success">
+                                Success notice
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-info">
+                                Info notice
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-error">
+                                Error notice
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-error">
+                                Error notice
+                                <hr/>
+                                <button class="ui-btn">
+                                    <span>Button</span>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-success">
+                                <div class="ui-text">
+                                    <h4>Nicely done!</h4>
+                                    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
+                                </div>
+                                <hr/>
+                                <button class="ui-btn">
+                                    <span>Button</span>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-info">
+                                Info notice
+                                <hr/>
+                                <button class="ui-btn">
+                                    <span>Button</span>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice accent-warning">
+                                Warning notice
+                                <hr/>
+                                <button class="ui-btn">
+                                    <span>Button</span>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-notice bg-error accent-light">
+                                <div class="ui-text">
+                                    <h4>Badly done!</h4>
+                                    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
+                                </div>
+                                <hr/>
+                                <button class="ui-btn accent-light muted">
+                                    <span>Button</span>
+                                </button>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                    </div>
+                    <div class="col-12" id="badge">
+                        <h1 class="ui-heading mb-4">Badge</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/badge.html" target="_blank">ui/badge</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <div class="ui-badge sm">
+                                Default
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-badge accent-dark">
+                                Dark
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-badge accent-light">
+                                Light
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-badge accent-primary rounded-full">
+                                <span>Primary</span>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <a href="#" class="ui-badge accent-main">
+                                Secondary
+                            </a>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-badge circle accent-main">
+                                9
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-badge md square accent-main">
+                                99
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <button class="ui-badge circle accent-main">
+                                <svg>
+                                    <use href="#icon-x"></use>
+                                </svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        {capture $code}
+                            <div class="ui-group">
+                                <div class="ui-badge accent-dark">
+                                    <span>npm</span>
+                                </div>
+                                <div class="ui-badge accent-info">
+                                    <span>7.1.2</span>
+                                </div>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="progress">
+                        <h1 class="ui-heading mb-4">Progress</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/progress.html" target="_blank">ui/progress</a> for more info.</p>
+                        </div>
+                        <div>
+                            {capture $code}
+                                <progress class="ui-progress accent-main" value="15" max="100">15%</progress>
+                            {/capture}{$code|code('html', true)|noescape}
+                            {capture $code}
+                                <progress class="ui-progress accent-primary" value="50" max="100">15%</progress>
+                            {/capture}{$code|code('html', true)|noescape}
+
+                            {capture $code}
+                                <progress class="ui-progress sm accent-error" value="75" max="100">15%</progress>
+                            {/capture}{$code|code('html', true)|noescape}
+                            {capture $code}
+                                <progress class="ui-progress accent-error" max="100">15%</progress>
+                            {/capture}{$code|code('html', true)|noescape}
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col col-12" id="text">
+                        <h1 class="ui-heading mb-4">Text</h1>
+                        <div class="ui-text mb-6">
+                            <p>See <a href="https://winduum.dev/docs/ui/text.html" target="_blank">ui/text</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <div class="ui-text">
+                                <h1>h1 heading</h1>
+                                <h2>h2 heading</h2>
+                                <h3>h3 heading</h3>
+                                <h4>h4 heading</h4>
+                                <h5>h5 heading</h5>
+                                <h6>h6 heading</h6>
+                                <p>Lorem ipsum dolor</p>
+                                <hr>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
+                                    metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
+                                    finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
+                                    hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
+                                    lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
+                                    Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
+                                    laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
+                                    Phasellus non pretium libero.</p>
+                                <p></p>
+                                <ul style="max-width: 400px">
+                                    <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
+                                        bibendum nisi et dui
+                                    </li>
+                                    <li>Donec eget efficitur metus</li>
+                                </ul>
+                                <p></p>
+                                <ul style="max-width: 400px; list-style: square">
+                                    <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
+                                        bibendum nisi et dui
+                                    </li>
+                                    <li>Donec eget efficitur metus</li>
+                                </ul>
+                                <p></p>
+                                <ul style="max-width: 400px; list-style: circle">
+                                    <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
+                                        bibendum nisi et dui
+                                    </li>
+                                    <li>Donec eget efficitur metus</li>
+                                </ul>
+                                <p></p>
+                                <ol style="max-width: 400px;">
+                                    <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
+                                        bibendum nisi et dui
+                                    </li>
+                                    <li>Donec eget efficitur metus</li>
+                                </ol>
+                                <ol type="1">
+                                    <li>Coffee</li>
+                                    <li>Tea</li>
+                                    <li>Milk</li>
+                                </ol>
+                                <ol type="A">
+                                    <li>Coffee</li>
+                                    <li>Tea</li>
+                                    <li>Milk</li>
+                                </ol>
+                                <ol type="a">
+                                    <li>Coffee</li>
+                                    <li>Tea</li>
+                                    <li>Milk</li>
+                                </ol>
+                                <ol type="I">
+                                    <li>Coffee</li>
+                                    <li>Tea</li>
+                                    <li>Milk</li>
+                                </ol>
+                                <ol type="i">
+                                    <li>Coffee</li>
+                                    <li>Tea</li>
+                                    <li>Milk</li>
+                                </ol>
+                                <p></p>
+                                <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+                                <p></p>
+                                <figure>
+                                    <img src="https://bulma.io/images/placeholders/256x256.png">
+                                    <figcaption>
+                                        Figure 1: Some beautiful placeholders
+                                    </figcaption>
+                                </figure>
+                                <h2>Heading</h2>
+                                <table>
+                                    <thead>
+                                    <tr>
+                                        <th scope="col">#</th>
+                                        <th scope="col">First</th>
+                                        <th scope="col">Last</th>
+                                        <th scope="col">Handle</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <tr>
+                                        <th scope="row">1</th>
+                                        <td>Mark</td>
+                                        <td>Otto</td>
+                                        <td>@mdo</td>
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">2</th>
+                                        <td>Jacob</td>
+                                        <td>Thornton</td>
+                                        <td>@fat</td>
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">3</th>
+                                        <td>Larry</td>
+                                        <td>the Bird</td>
+                                        <td>@twitter</td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                                <p></p>
+                                <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                            </div>
+                        {/capture}{$code|code('html', true)|noescape}
+                    </div>
+                    <div class="col-12 col-images" id="image">
+                        <h1 class="ui-heading mb-4">Image</h1>
+                        <div class="ui-text mb-6">
+                            <p>Images should be wrapped inside <code>.ui-image</code> class and as <code>div</code> or <code>picture</code></p>
+                            <p>You can add lazyload for the images with <code>loading="lazy"</code> attribute.</p>
+                            <p>To maintain ratio of the images you have to add ratio class from TailwindCSS, for example <code>aspect-[4/3]</code> or add <code>width</code> and <code>height</code> attributes to image.</p>
+                        </div>
+                        <style>
+                          .col-images .ui-image {
+                            max-width: 10rem;
+                          }
+                        </style>
+                        <div>
+                            {capture $code}
+                                <div class="ui-image aspect-[3/2]">
+                                    <img src="https://via.placeholder.com/300x200" alt="" loading="lazy" />
+                                </div>
+                            {/capture}{$code|code('html', true)|noescape}
+                        </div>
+                        <div>
+                            {capture $code}
+                                <picture class="ui-image aspect-[3/2]">
+                                    <source srcset="https://via.placeholder.com/300x200" />
+                                    <img src="https://via.placeholder.com/300x200" alt=""  loading="lazy" />
+                                </picture>
+                            {/capture}{$code|code('html', true)|noescape}
+                        </div>
+                        <div class="ui-text mb-5">
+                            <p>Lazyload can be added also on <code>iframe</code></p>
+                        </div>
+                        <div>
+                            {capture $code}
+                                <div class="ui-image aspect-square">
+                                    <iframe loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
+                                </div>
+                            {/capture}{$code|code('html', true)|noescape}
+                        </div>
+                        <hr/>
+                    </div>
+                </div>
+                <div class="row gap-8 flex-wrap" style="padding-top: 3rem;">
+                    <div class="col-12" style="padding-top: 0">
+                        <h1 class="ui-title lg uppercase text-primary">Libraries</h1>
+                    </div>
+                    <div class="col-12" id="form">
+                        <h1 class="ui-heading mb-4">Form</h1>
+                        <div class="ui-text mb-6">
+                            <p>Provides javascript form validation upon send via <code>data-controller="lib-form"</code> attribute.</p>
+                        </div>
+                        {capture $code}
+                            <form class="c-form" data-controller="lib-form">
+                                <div class="c_form_body grid gap-3">
+                                    <div class="c-field">
+                                        <div class="ui-control">
+                                            <select required>
+                                                <option selected disabled value="">- select option -</option>
+                                                <option>Czechia</option>
+                                                <option>Slovakia</option>
+                                            </select>
+                                            <label>Select country</label>
+                                        </div>
+                                    </div>
+                                    <div class="c-field">
+                                        <div class="ui-control">
+                                            <textarea required></textarea>
+                                            <label>Message</label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="c_form_info grid gap-3 py-4">
+                                    <div class="text-sm">Protected with reCAPTCHA <small>(<a href="https://www.google.com/intl/en/policies/privacy/" title="Privacy policy" target="_blank" rel="noopener">Privacy policy</a> - <a href="https://www.google.com/intl/en/policies/terms/" title="Terms of use" target="_blank" rel="noopener">Terms of use</a>)</small></div>
+                                    <div class="c-field">
+                                        <label class="ui-check">
+                                            <input type="checkbox" required>
+                                            <span>I agree with <a href="#">terms of use</a> and <a href="#">privacy policy</a></span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="c_form_foot">
+                                    <button class="ui-btn" aria-label="Send">Send</button>
+                                </div>
+                            </form>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12 items-start" id="dialog">
+                        <h1 class="ui-heading mb-4">Dialog</h1>
+                        <div class="ui-text mb-6">
+                            <h5>Usage on click</h5>
+                            <p>You can add <code>data-action="click->lib-dialog#show"</code> on any element with attribute <code>data-lib-dialog-url-param</code> which is url to <code>*.json</code> file or url request which contains html. For closing the dialog window, you can add <code>data-action="click->lib-dialog#hide"</code> to any element inside the dialog.</p>
+                            <h5>Usage on page load</h5>
+                            <p>To open dialog upon page load, add <code>data-lib-dialog-open-option</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), </p>
+                            <p>Url is passed as <code>data-lib-dialog-url-option</code>, you can also add selector to <code>data-lib-dialog-open-option</code>, HTML content of that selector opens as a dialog.</p>
+                            <h5>Variants (c-dialog)</h5>
+                            <ul>
+                                <li><code>size classes</code> - <code>sm</code>, <code>lg</code></li>
+                                <li><code>type classes</code> - <code>scrollable</code> - scroll inside dialog</li>
+                            </ul>
+                            <h5>Attributes (click->lib-dialog#show)</h5>
+                            <ul>
+                                <li><code>data-lib-dialog-url-param</code> - url of <code>*.json</code> file</li>
+                                <li><code>data-lib-dialog-remove-param</code> - <code>true/false</code> whenever to remove dialog element from dom after closing</li>
+                                <li><code>data-lib-dialog-append-param</code> - <code>true/false</code> whenever to append new dialog element after the previous dialog, otherwise the previous is replaced</li>
+                            </ul>
+                            <p>See <a href="https://winduum.dev/docs/lib/dialog.html">libraries/dialog</a> for more info.</p>
+                        </div>
+                        {capture $code}
+                            <button class="ui-btn" data-action="click->lib-dialog#show" data-lib-dialog-url-param="/dialog/basic.json">
+                                Open dialog window
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12 items-start" id="ripple">
+                        <h1 class="ui-heading mb-4">Ripple</h1>
+                        <div class="ui-text mb-6">
+                            <p>The ripple effect is automatically applied to buttons and other components</p>
+                            <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code></p>
+                            <p>Background color can be changed with CSS property <code>--lib-ripple-bg</code></p>
+                            <h5>Methods</h5>
+                            <ul>
+                                <li>initialization to any selector: <code>LibRipple(element)</code></li>
+                            </ul>
+                        </div>
+                        {capture $code}
+                            <div class="ui-btn" data-action="click->lib-ripple#show">Ripple me</div>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="drawer">
+                        <h1 class="ui-heading mb-4">Drawer</h1>
+                        <div class="ui-text">
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/Drawer.js</code></li>
+                                <li><code>src/styles/Libraries/Drawer.css</code></li>
+                            </ul>
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="datepicker">
+                        <h1 class="ui-heading mb-4">Datepicker</h1>
+                        <div class="ui-text">
+                            <p><a href="https://github.com/t1m0n/air-datepicker" target="_blank">Air Datepicker</a> is used as library in <code>ui-control</code> for <code>type="date"</code> and <code>type="datetime-local"</code>.</p>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/styles/Libraries/Datepicker.css</code></li>
+                            </ul>
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="slider">
+                        <h1 class="ui-heading mb-4">Slider</h1>
+                        <div class="ui-text mb-6">
+                            <p>Lightweight scroll based slider, which uses CSS <code>scroll-snap</code></p>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/Slider.js</code></li>
+                            </ul>
+                        </div>
+                        <div>
+                            {capture $code}
+                                <div data-controller="lib-slider">
+                                    <div class="flex slider gap-3" data-lib-slider-target="slider">
+                                        {foreach range(1, 6) as $i}
+                                            <div class="col col-4">
+                                                <div class="ui-image rounded overflow-hidden aspect-[8/5]">
+                                                    <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
+                                                </div>
+                                            </div>
+                                        {/foreach}
+                                    </div>
+                                    <div class="row-x justify-between items-center mt-4">
+                                        <div class="col col-left">
+                                            <button class="ui-btn square" aria-label="Previous" data-action="click->lib-slider#prev">
+                                                <svg class="icon">
+                                                    <use href="#icon-chevron-left"></use>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                        <div class="col col-counter m:hidden">
+                                            <div class="row py-3 gx-6 items-center justify-center">
+                                                <div class="col">
+                                                    <div class="flex gap-1.5 items-center" data-lib-slider-target="dots"></div>
+                                                </div>
+                                                <div class="col">
+                                                    <div><span data-lib-slider-target="counterMin">1</span>/<span data-lib-slider-target="counterMax"></span></div>
+                                                </div>
+                                            </div>
+                                            <progress class="ui-progress sm" value="50" max="100" data-lib-slider-target="progress"></progress>
+                                        </div>
+                                        <div class="col col-right">
+                                            <button class="ui-btn square" aria-label="Next" data-action="click->lib-slider#next">
+                                                <svg class="icon">
+                                                    <use href="#icon-chevron-right"></use>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            {/capture}{$code|code('html', true)|noescape}
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="swup">
+                        <h1 class="ui-heading mb-4">Swup</h1>
+                        <div class="ui-text">
+                            <p>Full-page animations between pages are done using <a href="https://github.com/gmrchk/swup" target="_blank" rel="noopener">Swup</a></p>
+                            <p>Everything is automatic and if the JS is correctly defined via Stimulus, all JS is reinitialized after site navigation</p>
+                            <p>If you do not want to use Swup on a specific link, you can use the attribute <code>data-no-swup</code></p>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/Swup.js</code></li>
+                            </ul>
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col col-12" id="tippy">
+                        <h1 class="ui-heading mb-4">Tippy</h1>
+                        <div class="ui-text mb-6">
+                            <p>For dropdowns and tooltips the <a href="https://atomiks.github.io/tippyjs/" target="_blank">Tippy.js</a> library is used</p>
+                            <p>Tippy properties can be freely modified using attributes <a href="https://atomiks.github.io/tippyjs/v6/customization/" target="_blank">data-tippy-*</a></p>
+                            <p>The basic properties are defined by  <code>data-lib-tippy="type, template"</code></p>
+                            <ul>
+                                <li><code>type</code> can be <code>dropdown</code> or <code>tooltip</code> with variants <code>-arrow</code> and <code>-full</code> (full width view on your phone)</li>
+                                <li><code>template</code> can be <code>id</code> section with html or url for <code>fetch</code> (the response must contain json with the key <code>content</code>)</li>
+                            </ul>
+                            <h5>Methods</h5>
+                            <ul>
+                                <li>initialization: <code>new LibTippy(element, attributes)</code></li>
+                            </ul>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/Tippy.js</code></li>
+                            </ul>
+                            <p>Loading tippy template from external file:</p>
+                        </div>
+                        {capture $code}
+                            <button class="ui-btn square" type="button" data-controller="lib-tippy" data-lib-tippy="dropdown-full, /dropdown/tippy.json" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
+                                <svg class="icon"><use href="#icon-at-symbol"></use></svg>
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                            <div class="ui-text mb-5">
+                                <p>Loading a tippy template from an inline template</p>
+                            </div>
+                            {capture $code}
+                            <button class="ui-btn" type="button" data-controller="lib-tippy" data-lib-tippy="tooltip-arrow, tippy-template" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
+                                Tooltip arrow
+                            </button>
+                            <template id="tippy-template">
+                                <div class="c-dropdown">
+                                    <ul class="wrp_c_list flex-col row-y gy-4">
+                                        <li class="col">
+                                            <button class="ui-link">
+                                                <span>{ edit }</span>
+                                            </button>
+                                        </li>
+                                        <li class="col">
+                                            <button class="ui-link">
+                                                <span>{ delete }</span>
+                                            </button>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </template>
+                        {/capture}{$code|code('html', true)|noescape}
+                            <div class="ui-text mb-5">
+                                <p>Classic tooltip</p>
+                            </div>
+                        {capture $code}
+                            <button class="ui-btn" type="button" data-controller="lib-tippy" aria-label="Hello world">
+                                Basic tooltip
+                            </button>
+                        {/capture}{$code|code('html', true)|noescape}
+                        <hr>
+                    </div>
+                    <div class="col-12" id="hint">
+                        <h1 class="ui-heading mb-4">Hint</h1>
+                        <div class="ui-text">
+                            <p>Easy CSS only tooltip via <code>aria-label</code> attribute.</p>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/styles/Libraries/Hint.css</code></li>
+                            </ul>
+                        </div>
+                        <div>
+                            {capture $code}
+                                <div class="ui-title lib-hint-top" aria-label="Tooltip text">
+                                    Tooltip
+                                </div>
+                            {/capture}
+                        {$code|code('html', true)|noescape}
+                        </div>
+                        <hr>
+                    </div>
+                    <div class="col-12" id="cookieconsent">
+                        <h1 class="ui-heading mb-4">CookieConsent</h1>
+                        <div class="ui-text">
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/CookieConsent.js</code></li>
+                                <li><code>src/styles/Components/CookieConsent.css</code></li>
+                                <li><code>src/styles/Components/Form/CookieConsent.css</code></li>
+                            </ul>
+                        </div>
+                        <hr/>
+                    </div>
+                    <div class="col-12" id="recaptcha">
+                        <h1 class="ui-heading mb-4">ReCaptcha</h1>
+                        <div class="ui-text mb-6">
+                            <p>Uses Google's <a href="https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages" target="_blank">recaptcha-enterprise</a></p>
+                            <p>ReCaptcha can be added to various types of forms, which can be optionally distinguished with attribute <code>data-lib-recaptcha-action-value</code></p>
+                            <p>Api key has to be added with <code>data-lib-recaptcha-api-value</code> attribute</p>
+                            <p>It can be evaluated upon submitting the form, with attribute <code>data-action="submit->lib-recaptcha#submit"</code> with optional param <code>data-lib-recaptcha-naja-param="true"</code> which sends form via naja.</p>
+                            <h5>Files:</h5>
+                            <ul class="mt-0">
+                                <li><code>src/scripts/Libraries/ReCaptcha.js</code></li>
+                            </ul>
+                        </div>
+                        {capture $code}
+                                <form data-controller="lib-recaptcha" data-lib-recaptcha-api-value="RECAPTCHA_KEY" data-lib-recaptcha-action-value="contact" data-action="submit->lib-recaptcha#submit">
+                                    <input name="gtoken" type="hidden">
+                                    <button>Send</button>
+                                </form>
+                        {/capture}{$code|code('html', false)|noescape}
+                        <hr>
+                    </div>
+                    <div class="col-12" id="stimulus">
+                        <h1 class="ui-heading mb-4">Stimulus</h1>
+                        <div class="ui-text">
+                            <p><a href="https://stimulusjs.org/" target="_blank" rel="noopener">Stimulus</a> is used for controller definitions, events and other JS interactions.</p>
+                            <p>This library ensures the life of individual components and initializes them automatically when the content is redrawn.</p>
+                            <p>Stimulus uses three main attributes <code>data-controller</code> (component definition), <code>data-action</code> (event definition - click, change etc.), <code>data-target</code> (target element in DOM)</p>
+                            <p>Usage example with all attributes:</p>
+                        </div>
+                        <pre><code class="language-html">
+                                <div data-controller="lib-example" data-lib-example-active-class="active" data-lib-example-text-value="0">
+                                    <button data-action="click->lib-example#show" data-action-color="red"></button>
+                                    <div data-lib-example-target="itemTarget"></div>
+                                </div>
+                            </code></pre>
+                        <pre><code class="language-js">
+                                import { LibStimulus, Controller, getController } from "../Libraries/Stimulus.js";
+
+                                LibStimulus.register("lib-example", class extends Controller {
+                                    // alternative target definitions (you can also use this.queryTarget or this.queryTargetAll instead)
+                                    static targets = ['item']
+                                    static classes = [ 'active' ]
+                                    static values = {
+                                        text: Number
+                                    }
+
+                                    connect() {
+                                        // starts when the controller is loaded into DOM
+                                    }
+
+                                    disconnect() {
+                                        // starts when the controller is deleted from DOM, use mainly if event listeners that are outside the controller are created in connect
+                                    }
+
+                                    show({ currentTarget }) {
+                                        // specific action to which the event can be applied
+
+                                        // refer to a specific target element and add a class and color settings
+                                        this.itemTarget.classList.add(this.activeClass);
+                                        this.itemTarget.style.color = currentTarget.dataset.actionColor;
+
+                                        // extract custom text defined by the controller, this always refers to the controller
+                                        if (!this.hasTextValue) {
+                                            this.textValue = 1;
+                                        }
+
+                                        this.itemTarget.textContent = this.textValue;
+                                        this.textValue = 2;
+
+                                        // This method can be used to communicate with another controller
+                                        getController(document.querySelector(".other_controller"), "other_controller").doSomething()
+                                    }
+                                })
+                            </code></pre>
+                        <div class="ui-text">
+                            <p>To fully understand the functionality, we recommend studying <a href="https://stimulusjs.org/reference/controllers" target="_blank" rel="noopener">documentation</a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>