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

Herobild: Default Left Auto 

<div class="rh-hero">
    <div class="rh-hero__middle-container">
        <div class="rh-hero__rounded" style="background-color: pink;">
            <div class="rh-hero__inner-container rh-hero__rounded px8 pb8 pt64" role="img" aria-label="En beskrivning om bilden inte är ren dekoration" style="background: url('/images/components/Molecules/image-hero/hero-g-samtal.jpg');
                        background-size: auto;
                        background-repeat: no-repeat;
                        background-position: center;
                        ">
                <span class="rh-hero__caption rh-hero__caption--rounded rh-hero__caption--desktop">
                        Björnbär sista händer ta sjö vemod själv, samtidigt räv nu plats.
                            <p class="rh-hero__ingress">Dimma söka ingalunda denna göras stig lax björnbär bra, genom blivit denna olika när så olika sax, lax annat där brunsås ser del mot.</p>
                            <div class="rh-hero__link"><a href="http://www.regionhalland.se">Löksås ipsum på dimmig stig</a></div>
                    </span>
            </div>
        </div>
        <div class="rh-dp-sm rh-hero__caption">Björnbär sista händer ta sjö vemod själv, samtidigt räv nu plats.
            <p class="rh-hero__ingress">Dimma söka ingalunda denna göras stig lax björnbär bra, genom blivit denna olika när så olika sax, lax annat där brunsås ser del mot.</p>
            <div class="rh-hero__link">
                <a href="http://www.regionhalland.se">Löksås ipsum på dimmig stig</a>
            </div>
        </div>
    </div>
</div>
 
{{#unless fullscreen}}
    <div class="rh-hero">
        <div class="rh-hero__middle-container">
            <div class="rh-hero__rounded" {{#if backgroundColor}}style="background-color: {{backgroundColor}};"{{/if}}>
                <div class="rh-hero__inner-container rh-hero__rounded px8 {{paddingBottom}} {{paddingTop}}" role="img" aria-label="En beskrivning om bilden inte är ren dekoration" 
                    style="background: url('/images/components/Molecules/image-hero/hero-g-samtal.jpg');
                        background-size: {{backgroundSize}};
                        background-repeat: {{backgroundRepeat}};
                        background-position: center;
                        {{#if right}}justify-content: flex-end;{{/if}}">
                    <span class="rh-hero__caption rh-hero__caption--rounded rh-hero__caption--desktop{{#if centered}} mx-auto{{/if}}">
                        {{captionText}}
                        {{#if heroIngress}}
                            <p class="rh-hero__ingress">{{heroIngress}}</p>
                        {{/if}}
                        {{#if heroLinkURL}}
                            <div class="rh-hero__link"><a href="{{heroLinkURL}}">{{heroLinkText}}</a></div>
                        {{/if}}
                    </span>
                </div>
            </div>
            <div class="rh-dp-sm rh-hero__caption">{{captionText}}
                {{#if heroIngress}}
                    <p class="rh-hero__ingress">{{heroIngress}}</p>
                {{/if}}
                {{#if heroLinkURL}}
                    <div class="rh-hero__link">
                        <a href="{{heroLinkURL}}">{{heroLinkText}}</a>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
{{/unless}}

{{#if fullscreen}}
    <div class="rh-hero" role="img" aria-label="En beskrivning om bilden inte är ren dekoration" 
        style="background: url('/images/components/Molecules/image-hero/hero-g-samtal.jpg');
            background-size: {{backgroundSize}};
            background-repeat:{{backgroundRepeat}};
            background-position: center;">
        <div class="rh-hero__middle-container">
            <div class="rh-hero__inner-container {{paddingBottom}} {{paddingTop}}{{#if right}} justify-end{{/if}}">
                <span class="rh-hero__caption rh-hero__caption--rounded rh-hero__caption--desktop{{#if centered}} mx-auto{{/if}}">
                    {{captionText}}
                    {{#if heroIngress}}
                        <p class="rh-hero__ingress">{{heroIngress}}</p>
                    {{/if}}
                    {{#if heroLinkURL}}
                        <div class="rh-hero__link">
                            <a href="{{heroLinkURL}}">{{heroLinkText}}</a>
                        </div>
                    {{/if}}
                </span>
            </div>
            <div class="rh-dp-sm rh-hero__caption">{{captionText}}
                {{#if heroIngress}}
                    <p class="rh-hero__ingress">{{heroIngress}}</p>
                {{/if}}
                {{#if heroLinkURL}}
                    <div class="rh-hero__link">
                        <a href="{{heroLinkURL}}">{{heroLinkText}}</a>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
{{/if}}
 
{
  "fullscreen": "",
  "backgroundColor": "pink",
  "backgroundSize": "auto",
  "paddingTop": "pt64",
  "paddingBottom": "pb8",
  "backgroundRepeat": "no-repeat",
  "centered": "",
  "captionText": "Björnbär sista händer ta sjö vemod själv, samtidigt räv nu plats.",
  "heroIngress": "Dimma söka ingalunda denna göras stig lax björnbär bra, genom blivit denna olika när så olika sax, lax annat där brunsås ser del mot.",
  "heroLinkURL": "http://www.regionhalland.se",
  "heroLinkText": "Löksås ipsum på dimmig stig"
}
  • Content: 
    .rh-hero {
    &__caption {
        color: $white;
        background: $black;
        padding: $space-6;
        line-height: $line-height--standard;
        font-size: $font-size--2xl;

        &--desktop {
            display: none;
            @include medium {
                display: inline;
                max-width: 22em;
            }
        }

        &--secondary {
            color: $black;
            background: $white;
        }

        &--rounded {
            border-radius: $border-radius--medium;
        }
    }

    &__ingress {
        font-size: $font-size--2xs;
        line-height: $line-height--large;
        padding-top: $space-2;
    }

    &__link {
        font-size: $font-size--2xs;
        line-height: $line-height--large;
        text-align: right;
    }

    &__link a {
        color: white;
    }

    &__middle-container {
        padding-left: 0;
        padding-right: 0;
        margin: auto;
        max-width: $page__container--max-width;

        @include medium {
            padding-left: $page__container--medium-padding-x;
            padding-right: $page__container--medium-padding-x;
        }

        @include large {
            padding-left: $page__container--large-padding-x;
            padding-right: $page__container--large-padding-x;
        }

        @include xlarge {
            padding-left: $page__container--xlarge-padding-x;
            padding-right: $page__container--xlarge-padding-x;
        }
    }

    &__inner-container {
        display:flex;
        max-width: $hero--max-width;
        margin: auto;
    }

    &__rounded {
        @include medium {
            border-radius: $border-radius--medium;
        }
    }
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: components/Molecules/hero/_hero.scss
  • Size: 1.7 KB
  • Content: 
    {
    "name": "regionhalland/hero",
    "description": "Image hero",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/hero/composer.json
  • Filesystem Path: components/Molecules/hero/composer.json
  • Size: 283 Bytes
  • Content: 
    /* Box-modell/beteende */
$hero--max-width: 90.0625em; //false - 1441px;
  • URL: /components/raw/hero/hero.settings.scss
  • Filesystem Path: components/Molecules/hero/hero.settings.scss
  • Size: 73 Bytes

Herobild

Versionhistorik:

2.3.1

  • Ändrat beteendet för smalare hero så att bakgrundsfärgen endast är synlig om bilden inte är täckande.

2.3.0

  • Ny container för att säkerställa samma padding som övrigt innehåll på sidan.

2.2.0

  • Herobilden har rundade hörn i stora breakpoints om den inte fyller hela sidan
  • Ingress introducerad
  • Länk introducerad

2.1.0 Drar in caption från kanten lite med px8

2.0.1 Korrigering av klassnamn kvarglömt fr. prototyp

2.0.0 Brytande ändringar - totalt omskriven

  • Modifiers “–rounded” och “–secondary” finns kvar och beter sig som innan.

1.0.3

  • Bytt namn från “Image hero” till “Hero”

1.0.2

  • Status “stable”

1.0.1 (2019-11-12)

  • Herobilden kan renderas utan min-width och max-with.

1.0.0 - Flyttat molekylen till githubrepo.

2019-08-21 (0.0.0)

  • Har bytt namn för klassen .rh-image-hero -> .rh-hero__image.
    • Det blir mer konsekvent för hela komponenten. Klassnamn börjar med .rh-hero...
    • Det blir enklare för att ha koll på klasser i Stilguiden.