poly-web-ui 1.5.0-dev

Widget component

The widget is an extended card to display grouped content. Content has slightly different default styles. The footer is optional. A Table for instance is unstriped and

Example

html 
<div class="widget">
    <div class="widget__heading">
        <h5 class="widget__title flex-child-grow">
            <i class="icon icon-user"></i>
            <span>Überschrift</span>
        </h5>
        <a href="#" class="button clear primary">
            <span>Button</span>
            <i class="icon icon-edit"></i>
        </a>
    </div>
    <div class="widget__content">
        Content
    </div>
    <div class="widget__footer">
        Footer (optional)
    </div>
</div>

Additionaly we added the class .light with a light header background color.

Example

html 
<div class="widget light">
    <div class="widget__heading">
        <h5 class="widget__title flex-child-grow">
            <i class="icon icon-user"></i>
            <span>Überschrift</span>
        </h5>
        <a href="#" class="button clear primary">
            <span>Button</span>
            <i class="icon icon-edit"></i>
        </a>
    </div>
    <div class="widget__content">
        Content
    </div>
</div>

Variables

$widget-heading-background (Color)

scss 
$widget-heading-background: color(secondary) !default;

Background color of widget__heading.

$widget-heading-icon-color (Color)

scss 
$widget-heading-icon-color: color(white) !default;

Icon color for icons in widget__heading.

$widget-heading-title-color (Color)

scss 
$widget-heading-title-color: color(white) !default;

Title color in widget__heading.

$widget-subtitle-color (Color)

scss 
$widget-subtitle-color: color(medium-gray) !default;

Subtitle color in widget__content.