denniss17/pimatic-angular-material-frontend

<md-card>
    <div layout="row" class="device-header">
        <div class="device-icon-wrapper">
            <span class="device-icon">
                <i class="mdi mdi-pulse"></i>
            </span>
        </div>
        <div class="device-titles" layout="column" flex>
            <h1>{{device.name}}</h1>

            <h2>{{device.template}}</h2>
        </div>
        <div class="device-header-values" layout="row" layout-align="end center">
           <span class="presence-indicator"
                 ng-class="{'presence-indicator-present': getAttribute('presence').value}"></span>
        </div>
    </div>
</md-card>

<style>
    .presence-indicator {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        display: block;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.082);
        background-color: #F44336;
    }

    .presence-indicator-present {
        background-color: #259b24;
    }
</style>