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

Footer logo group: Has Links 

<script>
    // The script is only using for demo
    document.getElementsByTagName("BODY")[0].style.padding = "";
</script>

<div class="rh-container--auto rh-container-px rh-overflow--hidden footer-logo-group">
    <div class="row row-eq-height footer-logo-group__logo-container">
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item" src="/images/components/kommuner_logo/RegionHalland.png" alt="RegionHalland Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-sm" src="/images/components/kommuner_logo/falkenberg-tp.png" alt="Falkenberg Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--right-sm footer-logo-group__item--center-from-md" src="/images/components/kommuner_logo/Halmstad.png" alt="Halmstad Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-from-md" src="/images/components/kommuner_logo/Hylte.png" alt="Hylte Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-sm" src="/images/components/kommuner_logo/laholm-tp.png" alt="Laholm Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--right" src="/images/components/kommuner_logo/Varberg.png" alt="Varberg Logo">
            </div>
        </div>
    </div>

    <div class="row footer-logo-group__link-container">
        <ul class="footer-logo-group__link-list">
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Information om cookies</a>
            </li>
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Behandling av personuppgifter</a>
            </li>
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Redogörelse för tillgänglighet</a>
            </li>
        </ul>
    </div>
</div>
 
<script>
    // The script is only using for demo
    document.getElementsByTagName("BODY")[0].style.padding = "";
</script>

<div class="{{#if hasContainer}}rh-container--auto rh-container-px {{/if}}rh-overflow--hidden footer-logo-group">
    <div class="row row-eq-height footer-logo-group__logo-container">
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item" src="/images/components/kommuner_logo/RegionHalland.png"
                    alt="RegionHalland Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-sm"
                    src="/images/components/kommuner_logo/falkenberg-tp.png" alt="Falkenberg Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--right-sm footer-logo-group__item--center-from-md"
                    src="/images/components/kommuner_logo/Halmstad.png" alt="Halmstad Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-from-md" src="/images/components/kommuner_logo/Hylte.png"
                    alt="Hylte Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--center-sm"
                    src="/images/components/kommuner_logo/laholm-tp.png" alt="Laholm Logo">
            </div>
        </div>
        <div class="col col-4 md-col-2">
            <div>
                <img class="footer-logo-group__item footer-logo-group__item--right"
                    src="/images/components/kommuner_logo/Varberg.png" alt="Varberg Logo">
            </div>
        </div>
    </div>

    {{#if hasLinks}}
    <div class="row footer-logo-group__link-container">
        <ul class="footer-logo-group__link-list">
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Information om cookies</a>
            </li>
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Behandling av personuppgifter</a>
            </li>
            <li class="footer-logo-group__link-item">
                <span class="icon-arrow-right footer-logo-group__link-icon"></span>
                <a href="#" class="rh-link--navigation footer-logo-group__link">Redogörelse för tillgänglighet</a>
            </li>
        </ul>
    </div>
    {{/if}}
</div>
 
{
  "name": "default",
  "status": "wip",
  "hasContainer": true,
  "hasLinks": true
}
  • Content: 
    .footer-logo-group {
    /* Box-modell/beteende */
    padding-top: $footer-logo-group--padding-top;
    padding-bottom: $footer-logo-group--padding-bottom;

    // Specifik rännor skapning
    &__logo-container {
        /* Box-modell/beteende */
        padding: 0;
        margin: -$footer-logo-group-gutters;

        /* Visuellt */
        background-color: #ffffff;

        @include medium {
            margin:  -$footer-logo-group-gutters-medium;
        }

        >[class*="col-"] {
            padding: $footer-logo-group-gutters;

            @include medium {
                padding: $footer-logo-group-gutters-medium;
            }
        }
    }

    &__item {
        /* Box-modell/beteende */
        display: block;
        max-height: $footer-logo-group__item--max-height;
        max-width: 100%;
        margin-bottom: $footer-logo-group__item--margin-bottom;

        /* Blandat/övrigt */
        opacity: $footer-logo-group__item--opacity;

        @include small {
            max-height: $footer-logo-group__item--max-height-small;
        }

        &:hover {
            opacity: $footer-logo-group__item--opacity-hover;
        }

        &--right {
            /* Box-modell/beteende */
            margin-left: auto;
        }

        // Align right only in sm mode
        &--right-sm {
            /* Box-modell/beteende */
            margin-left: auto;

            @include medium {
                margin-left: 0;
            }
        }

        // &--center {
        //     /* Box-modell/beteende */
        //     margin-left: auto;
        //     margin-right: auto;
        // }

        &--center-sm {
            /* Box-modell/beteende */
            margin-left: auto;
            margin-right: auto;
        }

        &--center-from-md {
            @include medium {
                /* Box-modell/beteende */
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    &__link {
        /* Typografi */
        font-size: $footer-logo-group__link--font-size;

        &-icon {
            font-family: $icon--font-family;
        }

        &-item {
            /* Box-modell/beteende */
            margin-bottom: $footer-logo-group__link-item--margin-bottom;

            @include medium {
                padding-left: $footer-logo-group__link-item--margin-bottom;
            }
        }

        &-container {
            /* Box-modell/beteende */
            margin-top: $footer-logo-group__link-container--margin-top;

            @include medium {
                /* Typografi */
                text-align: $footer-logo-group__link-container--text-align-medium;
            }
        }

        &-list {
            &>li {
                @include medium {
                    /* Typografi */
                    display: inline;
                }
            }
        }
    }
}
  • URL: /components/raw/footer-logo-group/_footer-logo-group.scss
  • Filesystem Path: components/Organisms/footer-logo-group/_footer-logo-group.scss
  • Size: 2.9 KB
  • Content: 
    {
    "name": "regionhalland/footer-logo-group",
    "description": "footer logo group",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/footer-logo-group/composer.json
  • Filesystem Path: components/Organisms/footer-logo-group/composer.json
  • Size: 304 Bytes
  • Content: 
    /* Organism - Footer logo group */
$footer-logo-group-gutters: $space-1; //.2em;
$footer-logo-group-gutters-medium: $space-1; //.4em;

$footer-logo-group--padding-top: $space-8; //2em;
$footer-logo-group--padding-bottom: $space-8; //2em;

$footer-logo-group__logo-container--background-color: $white;
$footer-logo-group__item--max-height: 1.875em; //30px
$footer-logo-group__item--max-height-small: 3.125em; //50px
$footer-logo-group__item--margin-bottom: $space-4; //1em; //50px
$footer-logo-group__item--opacity: 0.5;
$footer-logo-group__item--opacity-hover: 1;

$footer-logo-group__link-container--margin-top: $space-4; //1em;
$footer-logo-group__link-container--text-align-medium: right;

$footer-logo-group__link--font-size: $font-size--small; //0.875em; //14px
$footer-logo-group__link-item--margin-bottom: $space-4; //1em;
$footer-logo-group__link-item--padding-left-medium: $space-8; //2em;
  • URL: /components/raw/footer-logo-group/footer-logo-group.settings.scss
  • Filesystem Path: components/Organisms/footer-logo-group/footer-logo-group.settings.scss
  • Size: 899 Bytes

Organismen “Footer logo group”

Versionshistorik

  • 1.0.0.20200204 Globala variabler används
  • 1.0.0.20191123 Flyttat till gitrepo