v7.1.0

Card

Table of Contents

Detail

カード型の汎用レイアウトを作る CSS。

Basic

.card セレクターを使用します。余白を作る場合は Padding を付与。配下には Box・その他エレメントやコンポーネントを配置します。

Attached
children
<div class="card is-bg-light is-floating">
  <div class="box is-padding-md">children</div>
</div>
SelectorDescription
.cardカードレイアウトに使うセレクター。
ModifierDescription
.is-bg, .is-bg-light.card に付与すると白背景が追加されます。
.is-outline.card に付与すると border が追加されます。
.is-floating.card に付与するとフローティング装飾が追加されます。

Radius

.is-radius-(value) 形式のモディファイアを .card に付与すると溝を作れます。(value) を省略した場合は md と同等の値になります。

(value) は Meter の値を引き継いでいます。

Radius
children
<div class="card is-radius-md is-bg-light is-floating">
  <div class="box is-padding-md">children</div>
</div>
XXSXSSmallMediumLargeXLXXL
.is-radius-xxs.is-radius-xs.is-radius-smis-radius, .is-radius-md.is-radius-lg.is-radius-xl.is-radius-xxl
Link
children
<a class="card is-link is-bg-light is-floating is-radius-md" href="#">
  <div class="box is-padding-md">children</div>
</a>
ModifierDescription
.is-link.card に付与するとリンクホバー装飾を追加します。
.is-disabled.card に付与するとリンクを無効化します。

Zoom

Zoom
children
<a class="card is-zoom is-bg-light is-floating is-radius-md" href="#">
  <div class="box is-padding-md">children</div>
</a>
ModifierDescription
.is-zoom.card に付与するとホバーでズームするようになります。
.is-disabled.card に付与するとリンクを無効化します。

Variables

CSS Variables
Name
Default Value
Compiled Value
  • Name
    $selector-card
    Default Value
    .card
    Compiled Value
    .card
  • Name
    $modifier-card-bg
    Default Value
    .is-bg
    Compiled Value
    .is-bg
  • Name
    $modifier-card-bg-light
    Default Value
    .is-bg-light
    Compiled Value
    .is-bg-light
  • Name
    $modifier-card-outline
    Default Value
    .is-outline
    Compiled Value
    .is-outline
  • Name
    $modifier-card-disabled
    Default Value
    .is-disabled
    Compiled Value
    .is-disabled
  • Name
    $modifier-card-link
    Default Value
    .is-link
    Compiled Value
    .is-link
  • Name
    $modifier-card-zoom
    Default Value
    .is-zoom
    Compiled Value
    .is-zoom
  • Name
    $modifier-card-floating
    Default Value
    .is-floating
    Compiled Value
    .is-floating
  • Name
    $modifier-card-radius
    Default Value
    .is-radius
    Compiled Value
    .is-radius
  • Name
    $modifier-card-radius-xxl
    Default Value
    .is-radius-xxl
    Compiled Value
    .is-radius-xxl
  • Name
    $modifier-card-radius-xl
    Default Value
    .is-radius-xl
    Compiled Value
    .is-radius-xl
  • Name
    $modifier-card-radius-lg
    Default Value
    .is-radius-lg
    Compiled Value
    .is-radius-lg
  • Name
    $modifier-card-radius-md
    Default Value
    .is-radius-md
    Compiled Value
    .is-radius-md
  • Name
    $modifier-card-radius-sm
    Default Value
    .is-radius-sm
    Compiled Value
    .is-radius-sm
  • Name
    $modifier-card-radius-xs
    Default Value
    .is-radius-xs
    Compiled Value
    .is-radius-xs
  • Name
    $modifier-card-radius-xxs
    Default Value
    .is-radius-xxs
    Compiled Value
    .is-radius-xxs
  • Name
    $card-background-color
    Default Value
    $convert-background-1
    Compiled Value
    white
  • Name
    $card-border-width
    Default Value
    $global-border-width
    Compiled Value
    1px
  • Name
    $card-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $card-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5)
  • Name
    $card-link-hover-background-color
    Default Value
    $convert-background-3
    Compiled Value
    whitesmoke
  • Name
    $card-link-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $card-zoom-transform
    Default Value
    scale(1.025)
    Compiled Value
    scale(1.025)
  • Name
    $card-zoom-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $card-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-alpha
    Compiled Value
    0 2px 6px 0 rgba(0, 0, 0, 0.15)
  • Name
    $card-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-alpha
    Compiled Value
    0 4px 12px 0 rgba(0, 0, 0, 0.15)
  • Name
    $card-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.15)
  • Name
    $card-radius-xxl
    Default Value
    $radius-xxl
    Compiled Value
    16px
  • Name
    $card-radius-xl
    Default Value
    $radius-xl
    Compiled Value
    12px
  • Name
    $card-radius-lg
    Default Value
    $radius-lg
    Compiled Value
    8px
  • Name
    $card-radius-md
    Default Value
    $radius-md
    Compiled Value
    4px
  • Name
    $card-radius-sm
    Default Value
    $radius-sm
    Compiled Value
    3px
  • Name
    $card-radius-xs
    Default Value
    $radius-xs
    Compiled Value
    2px
  • Name
    $card-radius-xxs
    Default Value
    $radius-xxs
    Compiled Value
    1px

Mixins

  • musubii-style-card()
  • musubii-style-card-bg-light()
  • musubii-style-card-outline()
  • musubii-style-card-disabled()
  • musubii-style-card-link()
  • musubii-style-card-zoom()
  • musubii-style-card-floating()
  • musubii-style-card-radius($radius-size)

Sources