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

Block: Image Container 

<div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
    <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Sed ut perspiciatis unde" tabindex="-1"></a>

    <div class="rh-block">
        <div class="rh-block-image rh-block-image--small">
            <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">
        </div>

        <div class="rh-block-content">
            <p class="h3">
                <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">Sed ut perspiciatis unde</a>
            </p>

            <p class="rh-block-content__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
    </div>
</div>
 
<div class="rh-block-box{{#if isClickable}} rh-block--clickable rh-element--clickable{{/if}}" tabindex="0">
    {{!-- The <a> tag is using for clickable feature --}}
    {{#if isClickable}}
    <a href="#" class="rh-link--navigation rh-element--clickable-link" title="{{title}}" tabindex="-1"></a>
    {{/if}}

    <div class="rh-block">
        {{!-- Image --}}
        {{#unless hasImageContainer}}
        <img src="{{imageUrl}}" alt="Text som beskriver bilden">
        {{else}}
        <div class="rh-block-image rh-block-image--small">
            <img src="{{imageUrl}}" alt="Text som beskriver bilden">
        </div>
        {{/unless}}

        {{!-- Content --}}
        <div class="rh-block-content">
            <p class="h3">
                <a href="#" class="rh-block-content__title rh-link--navigation"{{#if isClickable}} tabindex="-1"{{/if}}>{{title}}</a>
            </p>

            <p class="rh-block-content__description">{{description}}</p>
        </div>
    </div>
</div>
 
{
  "name": "default",
  "isClickable": true,
  "title": "Sed ut perspiciatis unde",
  "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
  "imageUrl": "/images/pressbild.jpg",
  "hasImageContainer": true
}
  • Content: 
    .rh-block {
    /* Box-modell/beteende */
    @if $block--width {
        width: $block--width;
    }

    /* Typografi */
    text-align: $block--text-align;

    /* Visuellt */
    background: $block--background;

    &-image {
        overflow: hidden;

        &--small {
            max-height: $block__img-container--small;
        }

        &--medium {
            max-height: $block__img-container--medium;
        }

        &--large {
            max-height: $block__img-container--large;
        }

        &--xlarge {
            max-height: $block__img-container--xlarge;
        }
    }

    &-content {
        /* Box-modell/beteende */
        margin-top: 0;
        padding: $block__text-container--padding;
        box-sizing: border-box;

        &__title {

            /* Typografi */
            @if $block__text-title--color {
                color: $block__text-title--color;
            }

            font-weight: $block__text-title--font-weight;
        }

        &__description {} // The empty class is using for clickable effect
    }

    img {
        /* Box-modell/beteende */
        width: $block__img--width;
        margin-bottom: $block__img--margin-bottom;
        border-radius: $block__img--border-radius;
    }

    &-box {

        /* Box-modell/beteende */
        @if $block__box--max-width {
            max-width: $block__box--max-width;
        }

        border-top: $block__box--border-top;
        border-right: $block__box--border-right;
        border-bottom: $block__box--border-bottom;
        border-left: $block__box--border-left;
        border-radius: $block__box--border-radius;
    }

    &--clickable {
        /* Positionering */
        //position: relative; // Replaced by using a global class .rh-element--clickable

        @include create-clickable-element-effect(
            "rh-block--clickable", //Box classname
            "rh-block-content__title", //Title link classname
            "rh-block-content__description", //Description classname
            $block-effect__box-outside,
            $block-effect__content-inside,
            $block__box--hover-border-top, //Box - border-top styling
            $block__box--hover-border-right, //Box - border-right styling
            false, //Box - border-bottom styling
            $block__box--hover-border-left, //Box - border-left styling
            $block__box--hover-box-shadow, //Box - shadow styling
            $block__box-tabbing--focus-box-shadow, //Box - shadow when focus
            $block__box-clickable__title--text-color-hover, //Title text color
            $block__box-clickable__title--text-decoration-hover, //Title text decoration
            $block__box-clickable__description--text-color-hover, //Description text color
            $block__box-clickable__description--text-decoration-hover //Description text decoration
        );
    }
}
  • URL: /components/raw/block/_block.scss
  • Filesystem Path: components/Molecules/block/_block.scss
  • Size: 2.9 KB
  • Content: 
    /* Molecules - Block */
// --- Base settings ---
$BLOCK--MAIN-COLOR: $base3;
// --- End of base settings ---

$block--width: 100%; // Can using "false" - 100% is useful when using grid system
$block--background: $white;

$block--text-align: left;
$block__text-container--padding: 0.9375em;
$block__text-title--color: false;//false
$block__text-title--font-weight: bold;

$block__box--max-width: false; //26em; //416px
$block__box--border-top: $border-thin--standard $grey-lighter;
$block__box--border-right: $border-thin--standard $grey-lighter;
$block__box--border-bottom: 0.25em solid $BLOCK--MAIN-COLOR;
$block__box--border-left: $border-thin--standard $grey-lighter;
$block__box--border-radius: 0.375em; // 6px

$block__img--width: 100%;
$block__img--margin-bottom: -0.625em; //-10px
$block__img--border-radius: $block__box--border-radius $block__box--border-radius 0 0;

// Image container
$block__img-container--small: 12.5em; //200px
$block__img-container--medium: 15.625em; //250px
$block__img-container--large: 18.75em; //300px
$block__img-container--xlarge: 21.875em; //350px

// ---clickable
$block-effect__box-outside: true;
$block-effect__content-inside: true;

// Common variables
$block__box-clickable__title--text-color: false;
$block__box-clickable__title--text-decoration: underline;
$block__box-clickable__description--text-color: false;
$block__box-clickable__description--text-decoration: false;

// Content - :hover and :active
$block__box-clickable__title--text-color-hover: $block__box-clickable__title--text-color; //false
$block__box-clickable__title--text-decoration-hover: $block__box-clickable__title--text-decoration; //false
$block__box-clickable__description--text-color-hover: $block__box-clickable__description--text-color; //false
$block__box-clickable__description--text-decoration-hover: $block__box-clickable__description--text-decoration; //false

// Box - :hover and :active
$block__box--hover-border-top: $border-thin--standard $BLOCK--MAIN-COLOR;
$block__box--hover-border-right: $border-thin--standard $BLOCK--MAIN-COLOR;
$block__box--hover-border-left: $border-thin--standard $BLOCK--MAIN-COLOR;
$block__box--hover-box-shadow: $box-shadow--standard $color-shadow;

// Box - :focus-within
$block__box-tabbing--focus-box-shadow: $box-shadow--standard $color-shadow;
  • URL: /components/raw/block/block.settings.scss
  • Filesystem Path: components/Molecules/block/block.settings.scss
  • Size: 2.3 KB
  • Content: 
    {
    "name": "regionhalland/block",
    "description": "Block",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/block/composer.json
  • Filesystem Path: components/Molecules/block/composer.json
  • Size: 279 Bytes

Block (Puff)

  • Komponents prefix: rh-block*
  • Filplats: /components/Molecules/block

1. Varianter

Namn Beskrivning
Default Endast rubrik är klickbar
Clickable Hela puffen är klickbar
Image container Det skapar en begränsning för bildens höjd

2. Användning

2.1. Default (Standard)

  • Använd Default variant.

2.2. Clickable (Hela puffen är klickbar)

  • Använd Clickable variant.
  • Standard beteende genereras automatisk av @mixin och aktiveras i klassen rh-block--clickable. Man kan också justera komponenten i komponentens inställningar.
    • :hover
    • :active
    • :focus-within

Huvud principer:

  • En <div> är container och det är runt om komponenten med position: relative;.
  • En länk <a> tag ska ligga ovan på hela div:n med position: absolute; z-index: 1;.

Användning:

<div class="rh-block-box rh-block--clickable rh-element--clickable">
    <a href="#" class="rh-element--clickable-link"></a>

    <div>
        <!-- Komponents innehåll -->
    </div>
</div>

2.3 Image container

En container wrappar runt om bilden för att bilden inte blir så höjd.

  • max-height
Klassnamn Fullständig namn Mått i em Mått i pixel
--small rh-block-image–small 12.5em 200px
--medium rh-block-image–medium 15.625em 250px
--large rh-block-image–large 18.75em 300px
--xlarge rh-block-image–xlarge 21.875em 350px

Användning:

<div class="rh-block-image rh-block-image--small">
    <img src="" alt="">
</div>

3. Versionhistorik

1.3.2 (2020-01-27)

  • Förbättring av .settings.scss.
  • JS behövs inte längre.

1.3.0 (2019-12-27)

Stöd för “background”

1.2.0 (2019-11-12)

  • Ny variant - “With image container”:
    • En container wrappar runt om bilden för att bilden inte blir så höjd.
    • Inbyggda klasser för snabb användning:
      • –small
      • –medium
      • –large
      • –xlarge
  • Lanseras i Stilguide version > 9.3.0

1.1.1 (2019-11-07)

  • Använda en förbättring version av @mixin create-clickable-element-effect som finns i Stilguide version ≥ 9.0.1 med två nya alternativ:
    • $box-effect-outside
    • $content-effect-inside

1.1.0 (2019-10-31)

  • Komponenten använder globala klasserna:
    • rh-element--clickable
    • rh-element--clickable-link
  • Komponents beteenden :hover, :active och :focus-within genereras från @mixin för att behålla gemensamm logiken i klickbara komponenter i Stilguiden. De kontrolleras av klassen rh-block--clickable.
  • Lanseras i Stilguide version > 8.5.0

1.0.0

  • Första version