card papper

Log In

card papper

You are here:app / ui /  card-papper

Paper

In material design, the physical properties of paper are translated to the screen.

This is a sheet of paper.

Paper can be used to build surface or other elements for your application.

src/app/containers/UiElements/demos/Cards/PaperSheet.js

Standard Cards

A card is a sheet of material that serves as an entry point to more detailed information.

Simple Card

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Media

Lorem ipsum

Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc

Quoted Card
Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one.
John Lennon
Identity Card
Contact and Address Card

  • J
    Name

    John Doe

  • Phone

    (+8543201213)

  • Address

    Town Hall Building no.45 Block C - ABC Street

  • src/app/containers/UiElements/demos/Cards/StandardCards.js

    Control Cards

    Supplemental actions within the card are explicitly called out using icons, text, and UI controls.

    UI Controls
    Live From Space
    Mac Miller
    Video Thumb
    R
    Live From SpaceSeptember 14, 2016
    Complex Interaction
    R
    Shrimp and Chorizo PaellaSeptember 14, 2016

    This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.

    src/app/containers/UiElements/demos/Cards/ControlCards.js

    Social Cards

    A Customized material-ui card that contain profile elements.

    Profile Card
    a
    John Doe

    UX designer

    10 connection


    Post Card
    a
    Jim DoeSept, 25 2018

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.

    Post Card (Without Image)
    a
    Jane DoeSept, 15 2018

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.

    src/app/containers/UiElements/demos/Cards/SocialCards.js

    Ecommerce Cards

    A Customized material-ui card that contain product information.

    Product Card

    Lorem ipsum dolor sit amet

    Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante.

    $30
    Product with discount
    Discount 10%

    Cras convallis lacus orci

    Phasellus ante massa, aliquam non ante at

    $18
    $20
    Sold Out Product
    Sold Out

    Lorem ipsum dolor sit amet

    Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante.

    $44
    List Mode
    Discount 10%

    Lorem ipsum dolor sit amet

    Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante.

    $30
    $20

    Lorem ipsum dolor sit amet

    Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante.

    $20

    src/app/containers/UiElements/demos/Cards/EcommerceCards.js

    marketplace logoBuy Now