sw-Button

ボタンのデフォルトスタイルです。

.l-Wrapper
  a.sw-Button(href="#") aタグボタン
  a.sw-Button.-disabled(href="#" tabindex="-1") aタグボタン
  button.sw-Button#foo(type="button") buttonタグボタン
  button.sw-Button(disabled type="button") buttonタグボタン
  input.sw-Button(type="button" value="inputボタン")
  input.sw-Button(type="button" value="inputボタン" disabled)

.-fullを追加すると横幅100%になります。

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-full(href="#") 横幅100%

.-autoを追加すると横幅はなりゆきになります。

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-auto(href="#") 横幅なりゆき

.sw-Button_Moreを追加すると矢印が付きます。

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button(href="#")
    | 矢印付きボタン
    svg.sw-Button_More(role="img")
      use(xlink:href="/assets/svg/sprite.svg#right-arrow1")

sw-Label

インラインで表示するラベルコンポーネントです。

.l-Wrapper
  span.sw-Label spanタグのラベルです。
  label.sw-Label labelタグのラベルです。
  a.sw-Label(href="#") aタグのラベルです。

sw-Link

テキストリンクのデフォルトスタイルです。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

sw-LinkDownload

ファイルをダウンロードするためのリンクであることを示す場合に使います。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkDownload(href="#")
      | ファイルをダウンロードする
      svg.sw-LinkDownload_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#download1")

sw-LinkExternal

外部リンクであることを示す場合に使います。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkExternal(href="#")
      | 外部リンクを開く
      svg.sw-LinkExternal_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#external1")

sw-LinkMore

クリックを促すようなテキストリンクに使います。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkMore(href="#")
      | 詳しく見る
      svg.sw-LinkMore_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#right-arrow1")

sw-LinkNote

注釈へのリンクです。<sup>タグの子要素として指定します。

.l-Wrapper
  p.sw-Text ○○
    sup.sw-Sup
      a.sw-LinkNote(href="#") 1
    | を使っています。

  p.sw-Text(lang="en") ○○
    sup.sw-Sup
      a.sw-LinkNote(href="#") 1
    | を使っています。

sw-LinkPdf

リンク先がPDFであることを示す場合に使います。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkPdf(href="#")
      | PDFをダウンロードする
      svg.sw-LinkPdf_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#pdf1")