Primary Layouts

Layout-content-a

Two Column Layout

This layout style is for a simple container consisting of two columns of different sizes. The first div is for primary content spanning 8 columns. The second div spans 4 columns and is designated for support content such as images, video, pullquotes, etc... and can be used with a "video" tag, "a" tag, "figure" tag, or just a simply "div" tag.

            <article class="layout-content-a">
              <div><!-- First container spanning 8 columns. --></div>
              <div><!-- Second container spanning 4 columns (can also be video, a, or figure tag). --></div>
            </article>
          

Layout-content-b

Three Column Layout

This layout style is a container consisting of three sections. The first is designated for an image or graphic of some kind and spans two columns. The second section is for primary content and spans six columns. The final section is for additional content such as links or a CTA and spans four columns.

          <article class="layout-content-b">
            <figure>
              <!-- First container, designated for images and spans 2 columns. -->
              <img src="/portals/1/">
            </figure>
            <div><!-- Primary content container spanning 6 columns --></div>
            <div><!-- Tertiary container for support material, spans 4 columns. --></div>
          </article>
        

Layout-content-d

Two Column Layout

This layout consists of two sections. The first section spans 3 columns and is designated for media such as figure and video tags; it can also be used for a custom "a" tag. The second section spans 9 columns and is a general div tag; designated for primary content.

          <article class="layout-content-d">
            <figure>
              <!-- First container spanning 3 columns. -->
              <img src="/portals/1/">
            </figure>
            <div><!-- Second container spanning 9 columns. --></div>
          </article>
        

Layout-content-e

Three Column Layout

This is a three column layout that targets an article header, followed by a media section and then general content. The first container is for the h1 tag and spans two columns. The second container targets a figure tag and also spans two columns. The final container is a general div tag and spans 8 columns.

          <article class="layout-content-e">
            <h1><!-- First container spanning 2 columns. --></h1>
            <figure><!-- Second container spanning 2 columns. --></figure>
            <div><!-- Third container spanning 8 columns for primary content. --></div>
          </article>
        

Layout-content-g

Four Column Layout

This layout is a four-column, grid style layout for images accompanied by text. The containers consist of a single column for image content and then five columns for general content.

          <article class="layout-content-g">
            <figure>
              <!-- First container spanning 1 column. -->
              <img src="/portals/1/">
            </figure>
            <div><!-- Second container spanning 5 columns. --></div>
            <figure>
              <!-- Third container spanning 1 column. -->
              <img src="/portals/1/">
            </figure>
            <div><!-- Final container spanning 5 columns. --></div>
          </article>
        

Layout-content-h | row-roomy

Two Column Layout

This is a two column layout designated for two equal and primary sections of content. Use in conjunction with .row-roomy class to create extra padding on the containing divs (60px of padding with row-roomy, 30px without).

Layout-content-h without row-roomy
Layout-content-h with row-roomy
          <article class="layout-content-h row-roomy">
            <div><!-- First container spanning 6 columns. --></div>
            <div><!-- Second container spanning 6 columns. --></div>
          </article>
        

Layout-content-i

Single Column Layout

This is a simple layout meant for one content area in which all content is floated left and text content is restricted to 50% width.

          <article class="layout-content-i">
            <h1><!-- Header content. --></h1>
            <p><!-- Body content. --></p>
          </article>
        

Layout-content-j

Two column layout

This is an equal-sized, two column layout for general content to be contained within a div tag.

          <article class="layout-content-j">
            <div><!-- First container. --></div>
            <div><!-- Second container --></div>
          </article>
        

Layout-content-k

Two Column Layout

This is a two column layout with the first smaller section spanning 4 columns for image content and the second section spanning 8 columns for general content.

          <article class="layout-content-k">
            <figure>
            <!-- Header content. -->
            <img src="/portals/1/">
            </figure>
            <p><!-- Body content. --></p>
          </article>
        

Layout-content-l

Single Column Layout

This is an open-ended layout with specific values added for padding and margin to create extra space both inside and outside of the div tag. There are no forced rows or columns in this layout in order to maintain versatility.

          <article class="layout-content-l">
           <!-- ... -->
          </article>
        

Layout-content-m

Two Column Layout

This layout has two columns. The first container is for image content and spans 5 columns. The second is for general content and spans 7 columns. There is extra padding, gray background and rounded corners on the container.

          <article class="layout-content-m">
            <figure>
            <!-- Image content. -->
            <img src="/portals/1/">
            </figure>
            <div><!-- Body content. --></div>
          </article>
        

Layout-content-n

Two Column Layout

This layout has two columns and an absolutely positioned header (top-left) with black text on white background and rounded corners. The first section is for primary content and spans eight columns while the secondary section is for supporting content and links.

          <article class="layout-content-n">
            <div><!-- Primary content. --></div>
            <div><!-- Supporting content. --></div>
          </article>
        

Layout-content-o

Two Column Layout

This layout is an extension of layout-content-n but with the header absolutely positioned to the top-right.

          <article class="layout-content-o">
            <div><!-- Primary content. --></div>
            <div><!-- Supporting content. --></div>
          </article>
        

Layout-content-p

Two Column Layout

This is a two column layout similar to layout-content-m but with a couple of key differences. The first section spans two columns and is for image content. The second section is for general content and spans ten columns, giving extra space for primary content.

          <article class="layout-content-p">
            <figure><!-- Image content. --></figure>
            <div><!-- Body content. --></div>
          </article>
        

Layout-content-q

Single Column Layout

This is a single column layout with a header absolutely positioned in the top left and the primary content div is restricted to 50% width. This layout is useful with a background image in a full-width-pane.

          <article class="layout-content-q">
            <h1><!-- Header content. --></h1>
            <p><!-- Body content. --></p>
          </article>
        

Layout-content-r

Three Column Layout

This is a layout with three equal columns that span the full width of the container. It has a custom header absolutely positioned to the top-right.

          <article class="layout-content-r">
            <h1><!-- Header content. --></h1>
            <div>
              <!-- Body content. -->
              <figure><!-- Image container --></figure>
              <figure><!-- Image container --></figure>
              <figure><!-- Image container --></figure>
            </div>
          </article>
        

Layout-content-s

Four Column Layout

This is a four column layout target at organizing and grouping lists/links. All four sections span 3 columns each; the first section is to contain a header and the next 3 for unordered lists (<ul>).

          <article class="layout-content-s">
            <h1><!-- Header content. --></h1>
            <ul><!-- List content. --></ul>
            <ul><!-- List content. --></ul>
            <ul><!-- List content. --></ul>
          </article>
        

Helper Classes

Block

This is a simple spacing class that adds 30px of margin and padding to a container.

<article class="block"><!-- Misc. content. --></article>

Frame

Frame will add a gray background color (@gray-lighter: #EDF0F4) and rounded corners (border-radius: 10px) to a container.

<article class="frame"><!-- Misc. content. --<</article>

Layout-border

This helper class creates a top gray border on a container and is extended into layout-content-c and layout-content-f as well.

<article class="layout-border">
  <!-- Misc. content. -->
</article>

Btn-fullwidth

This class creates a default button style with 8px of padding, rounded corners, full width at mobile and 29% width at desktop size. It can be applied directly to a button or it can be extended into one of the layout classes. Use in conjunction with other classes for text and background colors (such as btn-primary).

<button class="btn-fullwidth"></button>
          <button class="btn-fullwidth btn-primary"></button>

Btn-short

This class is very similar to btn-fullwidth but with a width of 15% at desktop size.

<button class="btn-short"></button>
<button class="btn-short btn-primary"></button>

Row-roomy

This class will automatically add 60px of left and right padding to any div with a column class on it.

<article class="row-roomy">
  <div class="col-sm-6"><!-- First div. --></div>
  <div class="col-sm-6"><!-- Second div. --></div>
</article>

Side-pipes

This class adds right and left borders of 80% height to a div.

<div class="side-pipes"></div>

Three-col

This class will target all divs inside a container and make them span 4 columns.

<article class="three-col">
  <div><!-- First div. --></div>
  <div><!-- Second div. --></div>
  <div><!-- Third div. --></div>
</article>

Three-col-padded

This extends three-col but creates 45px of right/left padding and makes .btn (class for the button) 100% width.

<article class="three-col-padded">
  <div><!-- First div. --></div>
  <div><!-- Second div. --></div>
  <div><!-- Third div. --></div>
</article>
お問い合わせ