card

Description

card component

Installation

yarn add @moki.codes/mokui-card

Styles

@import "@moki.codes/mokui-button/dist/mokui-theme.css"
@import "@moki.codes/mokui-button/dist/mokui-animation.css"
@import "@moki.codes/mokui-button/dist/mokui-elevation.css"
@import "@moki.codes/mokui-card/dist/mokui-card.css"

Basic Usage

<div class="card card_type_horizontal card_actionable">
        <div
         class="elevation elevation_depth_1 card__elevation"
        ></div>
        <div class="card__text">
                <div class="card__header">
                        <div class="text text_length_m text_size_2xs text_weight_regular text_style_small-caps">
                                programming, c++
                        </div>
                        <div class="text text_weight_regular text_align_left text_size_l text_length_m">
                                Efficient memory
                                management
                        </div>
                        <div class="text text_size_xs text_align_left text_weight_regular text_length_m">
                                and why it
                                matters
                        </div>
                </div>
                <div class="card__body">
                        <div class="text text_size_xs text_align_left text_weight_regular text_length_m">
                                Dec 5, 2019
                        </div>
                </div>
        </div>
        <div class="card__media"
             style="background-image: url(https://images.saatchiart.com/saatchi/983048/art/4570311/3640149-XMXTS  NKS-7.jpg); width: 150px;"
        ></div>
</div>

Modificators

| name | value | description | | ----------------- | ----------------- | ------------------------------------ | | actionable | | makes whole card actionable, gives | | | | it clickable style | | type | horizontal | sets horizontal card style |

Elements

• elevation
  • elevation element, which gives resting state elevation to the card
• text
  • card's text content wrapper
• header
  • card's header inside text element
• body
  • card's body inside text element
• footer
  • card's footer inside text element
• media
  • card's media block, requires width to be set explicitly

elevation

provides resting state elevation to the card

text

wrapper used to group text content

header

card's header

body

card's body

footer

card's footer contains action items

media

card's media block, requires to explicitly set its width, and background-image styles