CodeGrid UI

Category

Tag

All Colors

header1

/src/assets2/scss/_components.scss
  • content
Heading text 1
<div class="CG2-header1">
  <div class="CG2-header1__heading">Heading text 1</div>
</div>

header2

/src/assets2/scss/_components.scss
  • content
Heading text 2
<div class="CG2-header2">
  <div class="CG2-header2__heading">Heading text 2</div>
</div>

header3

/src/assets2/scss/_components.scss
  • content
Heading text 3
<div class="CG2-header3">
  <div class="CG2-header3__heading">Heading text 3</div>
</div>

leadtext

/src/assets2/scss/_components.scss
  • content
LeadText
<div class="CG2-leadText">LeadText</div>

shortCentered

/src/assets2/scss/_components.scss
  • content
短い時はセンタリング
長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ
<div class="CG2-shortCentered">
  <div class="CG2-shortCentered__inner">
    短い時はセンタリング
  </div>
</div>


<div class="CG2-shortCentered">
  <div class="CG2-shortCentered__inner">
    長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ
  </div>
</div>

holizontalLine

/src/assets2/scss/_components.scss
  • content

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

<div class="CG2-holizontalLine"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

ImgBox

/src/assets2/scss/_components.scss
  • content

ラベル

キャプション

<article class="CG2-article">

  <div class="ImgBox">
    <h1>ラベル</h1>
    <p>キャプション</p>
    <p><img src="http://img.pxgrid.net/1000x200"></p>
  </div>

</article>

Column

/src/assets2/scss/_components.scss
  • content

コラムタイトル

テキストリンクてきすとcodeテキストてきすとテキストてきすと

テキストリンクてきすとcodeテキストてきすとテキストてきすと

<article class="CG2-article">

  <div class="Column">
    <h1>コラムタイトル</h1>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
    <p><img src="http://img.pxgrid.net/1000x200"></p>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
  </div>

</article>

Note

/src/assets2/scss/_components.scss
  • content
<article class="CG2-article">

  <div class="Note">
    <h1>*注:Autoprefixer</h1>
    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="">「ビルドツールアラカルト」</a>シリーズ</p>
  </div>

</article>