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

#80 Sidfot med loggor 

<!-- OBS! Demodiv för att kunna se hela komponenten -->
<div style="padding-top: 50px; padding-bottom:50px; background-color: #E4E4E4;">

    <div class="rh-footer-logo">

        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/RegionHalland.png" alt="RegionHalland Logo">
        </div>
        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Falkenberg.png" alt="Falkenberg Logo">
        </div>
        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Halmstad.png" alt="Halmstad Logo">
        </div>
        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Hylte.png" alt="Hylte Logo">
        </div>
        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Laholm.png" alt="Laholm Logo">
        </div>
        <div class="rh-footer-logo-div">
            <img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Varberg.png" alt="Varberg Logo">
        </div>

    </div>

</div>
<!-- OBS! Demodiv slut -->
 
<!-- OBS! Demodiv för att kunna se hela komponenten -->
<div style="padding-top: 50px; padding-bottom:50px; background-color: #E4E4E4;"> 


<div class="rh-footer-logo">

	<div class="rh-footer-logo-div">
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/RegionHalland.png" alt="RegionHalland Logo">
	</div>
	<div class="rh-footer-logo-div">	
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Falkenberg.png" alt="Falkenberg Logo">
	</div>
	<div class="rh-footer-logo-div">
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Halmstad.png" alt="Halmstad Logo">
	</div>
	<div class="rh-footer-logo-div">
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Hylte.png" alt="Hylte Logo">
	</div>
	<div class="rh-footer-logo-div">
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Laholm.png" alt="Laholm Logo">
	</div>
	<div class="rh-footer-logo-div">
		<img class="rh-footer-logo-item" src="/images/components/kommuner_logo/Varberg.png" alt="Varberg Logo">
	</div>


</div>



</div>	<!-- OBS! Demodiv slut -->
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    .rh-footer-logo{
	display: flex;
	justify-content: center;
	@include medium{ justify-content: space-around;}
	flex-wrap: wrap;
	padding: em(10);
	background-color: $white;
	text-align: center;
	
	&-div{
		flex-basis: 30%;
		@include medium{ flex-basis: auto;}
		@include large{ flex-basis: auto;}
	}

	&-item{
		margin-top: em(8);
		margin-bottom: em(8);
		height: 30px;
		@include large{ height: 45px;}
		opacity: 0.5;

		&:hover{
			opacity: 1;
		}
	}
}
  • URL: /components/raw/footer-logo/_footer-logo.scss
  • Filesystem Path: components/Organisms/footer-logo/_footer-logo.scss
  • Size: 457 Bytes
  • Content: 
    {
    "name": "regionhalland/footer-logo",
    "description": "footer logo",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/footer-logo/composer.json
  • Filesystem Path: components/Organisms/footer-logo/composer.json
  • Size: 292 Bytes

Organismen “Footer logo”

Versionshistorik

  • 1.0.0.20191123 Flyttat till gitrepo