Block

Een "Block" wordt gebruikt om tekst (content) in een tekstblok te plaatsen.

Gebruik

Om dit te bewerkstellingen zal de class  .uk-block gebruikt moeten worden.

Voorbeeld

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Markup

Hieronder staan de code van bovenstaand voorbeeld.

<<div class="uk-block uk-block-muted">

<div class="uk-container">

<div class="uk-grid uk-grid-match" data-uk-grid-margin="">

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

</div>

</div>

</div> 

 

Aanpassingen

Een Block kan door extra classes toe te voegen aangepast worden, zie hieronder de diverse opties.

Class Omschrijving
.uk-block-default Een block met de standaard (default) kleur, normaal wit of een beetje grijzig.
.uk-block-muted Een block met een lichte achtergrond kleur.
.uk-block-primary Een block met de "primary" kleur.
.uk-block-secondary Een block met een donkere kleur.

 

Voorbeeld

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

 

Hieronder staan de code van bovenstaand voorbeeld.

<<div class="uk-block uk-block-primary">

<div class="uk-container">

<div class="uk-grid uk-grid-match" data-uk-grid-margin="">

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="uk-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>

</div>

</div>

</div> 


Padding

Het is mogelijk om aan een "Block" een padding toe te voegen met de class  .uk-block-large 

Voorbeeld

Large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

 

Hieronder staan de code van bovenstaand voorbeeld.

<hr class="uk-article-divider" />
                    <h2 id="modifiers">Padding</h2>
                    <p>Het is mogelijk om aan een "Block" een padding toe te voegen met de class&nbsp; <code>.uk-block-large</code>&nbsp;</p>
                    <p><strong>Voorbeeld</strong></p>
                    <div class="uk-block uk-block-secondary uk-contrast uk-block-large">
                        <div class="uk-container">
                            <h3>Large</h3>
                            <div class="uk-grid uk-grid-match" data-uk-grid-margin="">
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                                    </di
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>