<commit_before><!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cover component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="../dist/js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../dist/js/addons/cover.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li class="uk-active"><a href="addons.html">Add-ons</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Layout</li>
                            <li><a href="addons_flex.html">Flex</a></li>
                            <li class="uk-active"><a href="addons_cover.html">Cover</a></li>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li><a href="addons_pagination.html">Pagination</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="addons_form-advanced.html">Form advanced</a></li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_form-select.html">Form select</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li><a href="addons_htmleditor.html">HTML editor</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_nestable.html">Nestable</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>Cover</h1>

                            <p class="uk-article-lead">Exand and images or videos to cover their entire container.</p>

                            <p>This powerful add-on allows you to create fullscreen teasers using images, objects or even iFrames. Regardless what kind of element, it will always be centered vertically and horizontally and cover its container. An additional position can be used to place content on top of the image or video.</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>This add-on is applied differently, depending on whether you are using a background image, an embedded object or an iFrame. To create a background image that covers its parent container, just add the <code>.uk-cover-background</code> class to a <code>&lt;div&gt;</code> element with a background image.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-cover-background" style="height: 300px; background-image: url(http://placekitten.com/1600/1200);"></div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-cover-background"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>Advanced</h3>

                            <p>You can also position content absolutely on top of the Cover add-on. To do so, you need to add the <code>.uk-position-relative</code> class to your <code>&lt;div&gt;</code> element and wrap it around an <code>&lt;img&gt;</code> element and a <code>&lt;div&gt;</code> element with the <code>.uk-position-cover</code> class from the <a href="utility.html">Utility component</a>. If you want to center the content vertically and horizontally, just add the <a href="addons_flex.html">Flex add-on</a>.</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-cover-background uk-position-relative" style="height: 300px; background-image: url(http://placekitten.com/1600/1200);">
                                <img class="uk-invisible" src="http://placekitten.com/600/400" width="600" height="400" alt="">
                                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                                    <div style="font-size: 50px; color: #fff">Bazinga!</div>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div class="uk-cover-background uk-position-relative"&gt;
    &lt;img class="uk-invisible" src="" width="" height="" alt=""&gt;
    &lt;div class="uk-position-cover uk-flex-center uk-flex-middle"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Cover Video</h2>

                            <p>To create a video that covers its parent container, add the <code>.uk-cover</code> class to a <code>&lt;div&gt;</code> element. Place a video object inside the <code>&lt;div&gt;</code> and add the <code>.uk-cover-object</code> class.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-cover">
                                <video class="uk-cover-object" width="600" height="400" autoplay="" loop="" muted="" controls="">
                                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                                </video>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-cover"&gt;
    &lt;video class="uk-cover-object" width="" height="" autoplay="" loop="" muted="" controls=""&gt;
        &lt;source src="" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Cover iFrame</h2>

                            <p>To apply the Cover add-on to an iFrame, you first need to include the <code>cover.js</code> in your document. Afterwards, all you need to do is add the <code>data-uk-cover</code> attribute to your iFrame.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <iframe style="height: 300px" data-uk-cover="" src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="620" height="360" frameborder="0" allowfullscreen="" style="width: 1130px; height: 657px;"></iframe>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;iframe data-uk-cover="" src="" width="" height="" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;</code></pre>

                        </article>
<commit_msg>updated docs  - typo<commit_after><!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cover component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="../dist/js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../dist/js/addons/cover.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li class="uk-active"><a href="addons.html">Add-ons</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Layout</li>
                            <li><a href="addons_flex.html">Flex</a></li>
                            <li class="uk-active"><a href="addons_cover.html">Cover</a></li>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li><a href="addons_pagination.html">Pagination</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="addons_form-advanced.html">Form advanced</a></li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_form-select.html">Form select</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li><a href="addons_htmleditor.html">HTML editor</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_nestable.html">Nestable</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>Cover</h1>

                            <p class="uk-article-lead">Exand and images or videos to cover their entire container.</p>

                            <p>This powerful add-on allows you to create fullscreen teasers using images, objects or even iframes. Regardless what kind of element, it will always be centered vertically and horizontally and cover its container. An additional position can be used to place content on top of the image or video.</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>This add-on is applied differently, depending on whether you are using a background image, an embedded object or an iframe. To create a background image that covers its parent container, just add the <code>.uk-cover-background</code> class to a <code>&lt;div&gt;</code> element with a background image.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-cover-background" style="height: 300px; background-image: url(http://placekitten.com/1600/1200);"></div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-cover-background"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>Advanced</h3>

                            <p>You can also position content absolutely on top of the Cover add-on. To do so, you need to add the <code>.uk-position-relative</code> class to your <code>&lt;div&gt;</code> element and wrap it around an <code>&lt;img&gt;</code> element and a <code>&lt;div&gt;</code> element with the <code>.uk-position-cover</code> class from the <a href="utility.html">Utility component</a>. If you want to center the content vertically and horizontally, just add the <a href="addons_flex.html">Flex add-on</a>.</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-cover-background uk-position-relative" style="height: 300px; background-image: url(http://placekitten.com/1600/1200);">
                                <img class="uk-invisible" src="http://placekitten.com/600/400" width="600" height="400" alt="">
                                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                                    <div style="font-size: 50px; color: #fff">Bazinga!</div>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div class="uk-cover-background uk-position-relative"&gt;
    &lt;img class="uk-invisible" src="" width="" height="" alt=""&gt;
    &lt;div class="uk-position-cover uk-flex-center uk-flex-middle"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Cover Video</h2>

                            <p>To create a video that covers its parent container, add the <code>.uk-cover</code> class to a <code>&lt;div&gt;</code> element. Place a video object inside the <code>&lt;div&gt;</code> and add the <code>.uk-cover-object</code> class.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-cover">
                                <video class="uk-cover-object" width="600" height="400" autoplay="" loop="" muted="" controls="">
                                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                                </video>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-cover"&gt;
    &lt;video class="uk-cover-object" width="" height="" autoplay="" loop="" muted="" controls=""&gt;
        &lt;source src="" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Cover Iframe</h2>

                            <p>To apply the Cover add-on to an iframe, you first need to include the <code>cover.js</code> file in your document. Afterwards, all you need to do is add the <code>data-uk-cover</code> attribute to your iframe.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <iframe style="height: 300px" data-uk-cover="" src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="620" height="360" frameborder="0" allowfullscreen="" style="width: 1130px; height: 657px;"></iframe>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;iframe data-uk-cover="" src="" width="" height="" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;</code></pre>

                        </article>

{'fraction_non_alphanumeric': 0.1629944391984052, 'fraction_numerical': 0.011856048683244151, 'mean_word_length': 1.9314162694141166, 'pattern_counts': {'":': 0, '<': 525, '<?xml version=': 0, '>': 525, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '622833', 'n_tokens_mistral': 5813, 'n_tokens_neox': 5481, 'n_words': 1061}