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

Footer group: With Container 

<footer class="rh-overflow--hidden rh-container--auto rh-container-p rh-footer-group">
    <div class="row row-eq-height row-section-gutters">
        <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
            <div>
                <div class="rh-footer-group__item-header">
                    <p class="rh-footer-group__item-header-title">Kontakta oss</p>
                </div>

                <div class="rh-footer-group__item-body">
                    <p>
                        Region Halland<br> Box 517<br> 301 80 Halmstad
                    </p>

                    <div class="rh-footer-group__item-body-address">
                        <p><strong>Telefon:</strong> <a href="tel:035 - 13 48 00" class="rh-link--navigation rh-footer-group__item-body-link">035 - 13 48 00</a></p>
                        <p><strong>E-post:</strong> <a class="rh-link--navigation rh-footer-group__item-body-link" href="mailto:regionen@regionhalland.se">regionen@regionhalland.se</a></p>
                    </div>

                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta
                                mottagarna</a></p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta personal</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
            <div>
                <div class="rh-footer-group__item-header">
                    <p class="rh-footer-group__item-header-title">Aktuellt</p>
                </div>

                <div class="rh-footer-group__item-body">
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Nyhetsarkiv</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Pressrum</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Region Halland i
                                sociala medier</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Anslagstavla</a></p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Möten och
                                handlingar</a></p>
                </div>
            </div>
        </div>

        <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
            <div>
                <div class="rh-footer-group__item-header">
                    <p class="rh-footer-group__item-header-title">Övriga webbplatser</p>
                </div>

                <div class="rh-footer-group__item-body">
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Regionhalland.se</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Vardgivare.regionhalland.se</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Intra.regionhalland.se</a>
                    </p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Hallandstrafiken.se</a></p>
                    <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">1177.se</a></p>
                </div>
            </div>
        </div>

        <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
            <div>
                <div class="rh-footer-group__item-header">
                    <p class="rh-footer-group__item-header-title">Om webbplatsen</p>
                </div>

                <div class="rh-footer-group__item-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation allamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit.</p>
                </div>
            </div>
        </div>
    </div>
</footer>
 
{{#unless withContainer}}
    <footer class="rh-overflow--hidden">
        <div class="row row-eq-height row-section-gutters">
            <div class="col col-12 md-col-4 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Kontakta oss</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p>
                            Region Halland<br>
                            Box 517<br>
                            301 80 Halmstad
                        </p>

                        <div class="rh-footer-group__item-body-address">
                            <p><strong>Telefon:</strong> <a href="tel:035 - 13 48 00" class="rh-link--navigation rh-footer-group__item-body-link">035 - 13 48 00</a></p>
                            <p><strong>E-post:</strong> <a class="rh-link--navigation rh-footer-group__item-body-link"
                                    href="mailto:regionen@regionhalland.se">regionen@regionhalland.se</a></p>
                        </div>

                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta
                                mottagarna</a></p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta personal</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col col-12 md-col-4 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Övriga webbplatser</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Vardgivare.regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Intra.regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Hallandstrafiken.se</a></p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">1177.se</a></p>
                    </div>
                </div>
            </div>

            <div class="col col-12 md-col-4 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Om webbplatsen</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation allamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
{{else}}
    <footer class="rh-overflow--hidden rh-container--auto rh-container-p rh-footer-group">
        <div class="row row-eq-height row-section-gutters">
            <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Kontakta oss</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p>
                            Region Halland<br>
                            Box 517<br>
                            301 80 Halmstad
                        </p>


                        <div class="rh-footer-group__item-body-address">
                            <p><strong>Telefon:</strong> <a href="tel:035 - 13 48 00" class="rh-link--navigation rh-footer-group__item-body-link">035 - 13 48 00</a></p>
                            <p><strong>E-post:</strong> <a class="rh-link--navigation rh-footer-group__item-body-link"
                                    href="mailto:regionen@regionhalland.se">regionen@regionhalland.se</a></p>
                        </div>

                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta
                                mottagarna</a></p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Kontakta personal</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Aktuellt</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Nyhetsarkiv</a>
                        </p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Pressrum</a>
                        </p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Region Halland i
                                sociala medier</a>
                        </p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Anslagstavla</a></p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Möten och
                                handlingar</a></p>
                    </div>
                </div>
            </div>

            <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Övriga webbplatser</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">Regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Vardgivare.regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Intra.regionhalland.se</a>
                        </p>
                        <p><a href="#"
                                class="rh-link--navigation rh-footer-group__item-body-link">Hallandstrafiken.se</a></p>
                        <p><a href="#" class="rh-link--navigation rh-footer-group__item-body-link">1177.se</a></p>
                    </div>
                </div>
            </div>

            <div class="col col-12 md-col-6 xl-col-3 rh-footer-group__item">
                <div>
                    <div class="rh-footer-group__item-header">
                        <p class="rh-footer-group__item-header-title">Om webbplatsen</p>
                    </div>

                    <div class="rh-footer-group__item-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation allamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
{{/unless}}
 
{
  "name": "default",
  "status": "wip",
  "withContainer": true
}
  • Content: 
    .rh-footer-group {

    // Reset global settings for HTML tag
    p { margin: 0; }

    /* Visuellt */
    @if $footer-group__container--background-color {
        background-color: $footer-group__container--background-color;
    }

    &__item {
        /* Typografi */
        @if $footer-group__text--color {
            color: $footer-group__text--color;
        }

        &-header {
            /* Box-modell/beteende */
            margin-bottom: $footer-group__header--margin-bottom;

            border-bottom-width: $footer-group__header--border-bottom-width;
            border-bottom-style: $footer-group__header--border-bottom-style;

            @if $footer-group__header--border-bottom-color {
                border-bottom-color: $footer-group__header--border-bottom-color;
            }

            &-title {
                /* Typografi */
                font-size: $footer-group__header-title--font-size;
                font-weight: $footer-group__header-title--font-weight;
                line-height: $footer-group__header-title--line-height;

                @include large {
                    font-size: $footer-group__header-title--font-size-large;
                }
            }
        }

        &-body {
            p {
                /* Typografi */
                font-size: $footer-group__body--font-size;
                word-break: $footer-group__body--word-break;

                @include large {
                    font-size: $footer-group__body--font-size-large;
                }
            }

            p {
                line-height: $footer-group__text--line-height;
            }

            a {
                line-height: $footer-group__link--line-height;
            }

            &-address {
                /* Box-modell/beteende */
                margin: $footer-group__body-address--margin;

                p,
                a {
                    line-height: $footer-group__text--line-height;
                }
            }

            &-link {
                /* Typografi */
                @if $footer-group__link--color {
                    color: $footer-group__link--color;
                }
            }
        }
    }
   
}
  • URL: /components/raw/footer-group/_footer-group.scss
  • Filesystem Path: components/Organisms/footer-group/_footer-group.scss
  • Size: 2.2 KB
  • Content: 
    {
    "name": "regionhalland/footer-group",
    "description": "footer group",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/footer-group/composer.json
  • Filesystem Path: components/Organisms/footer-group/composer.json
  • Size: 294 Bytes
  • Content: 
    /* Organism - Footer group */
// --- Base settings ---
$footer-group__container--background-color: $base3-light; //false
$footer-group__text--color: false;//false
$footer-group__link--color: false;//false
$footer-group__header--border-bottom-color: false;//false
// --- End of base settings ---

// Other settings
$footer-group__text--line-height: $line-height--3xl;

$footer-group__link--line-height: 2.75; //44px

$footer-group__header--margin-bottom: .8em;
$footer-group__header--border-bottom-width: 0.125em;
$footer-group__header--border-bottom-style: solid;

$footer-group__header-title--font-size: $font-size--standard;
$footer-group__header-title--font-size-large: $font-size--2xl;
$footer-group__header-title--font-weight: bold;
$footer-group__header-title--line-height: $line-height--3xl;

$footer-group__body--font-size: $font-size--small; //14px
$footer-group__body--font-size-large: $font-size--standard; //16px
$footer-group__body--word-break: break-word;
$footer-group__body-address--margin: .8em 0;
  • URL: /components/raw/footer-group/footer-group.settings.scss
  • Filesystem Path: components/Organisms/footer-group/footer-group.settings.scss
  • Size: 1 KB

Footer group

  • Komponents prefix: rh-footer-group*
  • Filplats: /components/Organism/footer-group

Ändringslogg

1.0.0.20200130

  • Fel fixats via rendering när man skriver över befintliga variabler.

1.0.0.20191123 Flyttat till gitrepo

1.0.0-201910221700 (2019-10-22)

  • Förbättringen är baserad på Stilguides version 7.2.0 och kommer finnas i nästa version > 7.2.0
  • Användning av generella klasser i global:
    • row-eq-height
    • row-section-gutters
    • rh-container-p
    • rh-container–auto