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

Kontaktkort 

<div class="rh-personal-info">

    <div class="rh-avatar rh-box-avatar" aria-label='Text som beskriver avataren'>
        <div class="avatar-content">
            JM
        </div>
    </div>

    <div class="rh-box-info">
        <h5>Kalle Testsson</h5>
        <h6 class="rh-personal-info-text">Verksamhetsstöd IT - Administratör</h6>
        <hr class="rh-personal-info-hr">
        <h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Mobil:</strong> 073 - 401 77 77 </h6>
        <h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Tel:</strong> 073 - 401 77 77</h6>
        <h6 class="rh-personal-info-text"><strong>Epost:</strong> regionen@regionhalland.se</h6>
        <h6 class="rh-personal-info-text"><strong>Besöksadress:</strong> Fiskaregatan 2 Halmstad</h6>
    </div>

</div>

<div style="height:100px"></div>

<div class="rh-personal-info">
    <div class="rh-box-info-alone">
        <h5>Kalle Testsson</h5>
        <h6 class="rh-personal-info-text">Verksamhetsstöd IT - Administratör</h6>
        <hr class="rh-personal-info-hr">
        <h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Mobil:</strong> 073 - 401 77 77 </h6>
        <h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Tel:</strong> 073 - 401 77 77</h6>
        <h6 class="rh-personal-info-text"><strong>Epost:</strong> regionen@regionhalland.se</h6>
        <h6 class="rh-personal-info-text"><strong>Besöksadress:</strong> Fiskaregatan 2 Halmstad</h6>
    </div>

</div>
 
<div class="rh-personal-info">

	 	<div class="rh-avatar rh-box-avatar" aria-label='Text som beskriver avataren'>
	 		<div class="avatar-content">
	 			JM
	 		</div>
	 	</div>

		<div class="rh-box-info">
			<h5>Kalle Testsson</h5>
			<h6 class="rh-personal-info-text">Verksamhetsstöd IT - Administratör</h6>
			<hr class="rh-personal-info-hr">
			<h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Mobil:</strong> 073 - 401 77 77 </h6>
			<h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Tel:</strong> 073 - 401 77 77</h6>
			<h6 class="rh-personal-info-text"><strong>Epost:</strong> regionen@regionhalland.se</h6>
			<h6 class="rh-personal-info-text"><strong>Besöksadress:</strong> Fiskaregatan 2 Halmstad</h6>
		</div>

</div>



<div style="height:100px"></div>


<div class="rh-personal-info">
	<div class="rh-box-info-alone">
			<h5>Kalle Testsson</h5>
			<h6 class="rh-personal-info-text">Verksamhetsstöd IT - Administratör</h6>
			<hr class="rh-personal-info-hr">
			<h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Mobil:</strong> 073 - 401 77 77 </h6>
			<h6 class="rh-personal-info-text rh-personal-info-text-inline"><strong>Tel:</strong> 073 - 401 77 77</h6>
			<h6 class="rh-personal-info-text"><strong>Epost:</strong> regionen@regionhalland.se</h6>
			<h6 class="rh-personal-info-text"><strong>Besöksadress:</strong> Fiskaregatan 2 Halmstad</h6>
	</div>

</div>
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    .rh-personal-info { 
  @include medium {
    display: flex;
    align-items: center;
  }
  padding-top: em(25);
  padding-bottom: em(25);
  padding-right: em(20);
  padding-left: em(20);
  box-shadow: 1px 2px 6px $color-shadow;
	background-color: $white;


	&-text{
    display: block;
		font-weight: normal;
    line-height: 1.5em;

    &-inline{
      @include medium {
        display: inline;
        margin-right: em(5);
      }
    }

	}

	.rh-personal-info-hr {
    width: 100%;
		margin-top: em(22);
		margin-bottom: em(22);
		border: em(1) solid $color-primary;
	}

  .rh-box-avatar {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    @include medium {
      width: 30%;
    }
  }

  .rh-avatar {
    width: em(150);
    height: em(150);
    @include medium {
      width: em(180);
      height: em(180);
    }
    background: $base2-light;
    border-radius: 50%;

    .avatar-content {
      padding-top: 50%;
      color: $black;
      text-align: center;
      font-weight: bold;
      font-size: em(30); 
    }
  }

  .rh-box-info {
    float: left;
    width: 100%;
    @include medium {
      width: 70%;
    }
  }

  .rh-box-info-alone {
    float: left;
    width: 100%;
  }

  &::after {
    content: "";
    clear: both;
    display: table;
  }

}
  • URL: /components/raw/personal-info/_personal-info.scss
  • Filesystem Path: components/Molecules/personal-info/_personal-info.scss
  • Size: 1.3 KB
  • Content: 
    {
    "name": "regionhalland/personal-info",
    "description": "Personal info",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/personal-info/composer.json
  • Filesystem Path: components/Molecules/personal-info/composer.json
  • Size: 295 Bytes

Molekylen “Personal info”

Versionshistorik

  • 1.0.0.20191122 Flyttat till gitrepo