Widget

pixss defines the most common used widgets, such as card, popup, showcase to constructure a web page quickly.

Widget: card

card is a pixss widget with corresponding box shadow, which is used commonly for the forms, image with the text, and so on. The card widget comprises just the elememnts that you can mix: card-title, card-image and card-content.

<div class="card">
    <div class="card-title">
      <h4 class="opacity-75">Login form</h4>
    </div>
    <div class="card-content">
      <p>card content</p>
    </div>
</div>

Widget: popup

popup is a lightbox implementation in pixss that comprises the elements that you can mix: title, content, action. With the utility class .full-width, popup can be displayed in fullscreen of mobile devices.

<div class="overlay open">
    <div class="popup">
        <div class="title">popup title</div>
        <div class="content">popup content</div>
    </div>
</div>

Widget: showcase

showcase is a pixss widget that has an image icon, title and description. It comprises the elements that you can mix: .icon, .content.