BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Avatar 

<div class="rh-avatar">
    <div class="avatar-content">JM</div>
</div>
 
<div class="rh-avatar"><div class="avatar-content">JM</div></div>
 
{
  "text": "Avatar Default",
  "name": "rh-avatar"
}
  • Content: 
    .rh-avatar {
    /* Positionering */
    position: relative;

    /* Box-modell/beteende */
    height: em(110);
    width: em(110);
    //box-sizing: border-box;

    /* Visuellt */
    background: $base2-light;
    border-radius: 50%;

    .avatar-content {
        /* Box-modell/beteende */
        float: left;
        margin-top: -0.5em;
        padding-top: 50%;
        width: 100%;

        /* Typografi */
        color: $black;
        line-height: 1;
        text-align: center;
        font-weight: bold;

        // font-size: em(20); 
        // @include medium { font-size: em(30);}
        // @include large { font-size: em(50);}
    }

    @include medium {
        height: em(122);
        width: em(122);
    }
    @include large {
        height: em(162);
        width: em(162);
    }
}
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: components/Atoms/avatar/_avatar.scss
  • Size: 808 Bytes
  • Content: 
    {
    "name": "regionhalland/avatar",
    "description": "Atomen avatar",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/avatar/composer.json
  • Filesystem Path: components/Atoms/avatar/composer.json
  • Size: 285 Bytes

Atomen “Avatar”

Denna atom kommer att raderas i framtiden. Vi avråder från användning.