Section
You can create a main content / section by specifying the uc-content, uc-section
class.
1. Basic
Create a basic section.
In principle, uc-content
can only be specified once.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<main class="uc-content">
<section class="uc-section">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
</main>
2. Color variations
Four kinds of color variations are available.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- Gray -->
<section class="uc-section _gray">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Black -->
<section class="uc-section _black">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Dark -->
<section class="uc-section _dark">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Zebra -->
<!-- It changes to a gray background when the order of elements is even. -->
<section class="uc-section _zebra">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
3. Centering
Specify the _center
class and center the element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.
<!-- Make all elements centered. -->
<section class="uc-section _center">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Place the title element and the text below it in the center. -->
<section class="uc-section">
<h2 class="uc-section-title _center">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
4. Set max width and center
Set the maximum horizontal width (1200px) and center it.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<section class="uc-section">
<div class="uc-section-inner">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>