UNITS

🇯🇵 Document Snippets Themes GitHub Twitter

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.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 
Lorem ipsum dolor sit amet.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.

Button
 
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.

Button
<!-- 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.

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>