CodeGrid UI

Category

Tag

All Colors

ImgBox

/src/assets2/scss/_components-app.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-app.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-app.scss
  • content
<article class="CG2-article">

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

</article>

header1

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

見出しレベルは文章の構成に応じて変更する。

Heading text 1

<div class="CG2-header1">
  <h1 class="CG2-header1__heading">Heading text 1</h1>
</div>

header2

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

見出しレベルは文章の構成に応じて変更する。

Heading text 2

<div class="CG2-header2">
  <h3 class="CG2-header2__heading">Heading text 2</h3>
</div>

header3

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

見出しレベルは文章の構成に応じて変更する。

Heading text 3

<div class="CG2-header3">
  <h3 class="CG2-header3__heading">Heading text 3</h3>
</div>

leadtext

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

見出しと判断されるものには見出しレベルを付与する。

LeadText
<div class="CG2-leadText">LeadText</div>

shortCentered

/src/assets2/scss/_components-shared.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-www.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>