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

Block - Icon Link: Warning 

<div class="rh-block-icon-link rh-block-icon-link--warning rh-element--clickable rh-w--fit-content" tabindex="0">
    <a href="#" class="rh-element--clickable-link" title="" tabindex="-1"></a>

    <div class="rh-button-circle rh-button-circle--warning rh-button-circle--large rh-block-icon-link__icon--warning" tabindex="-1">
        <span class="icon-mic-off rh-button-circle__icon"></span>
    </div>

    <a href="#" class="rh-link--navigation rh-block-icon-link__link--warning ml1" tabindex="-1">Block - Icon with Link</a>
</div>
 
<div class="rh-block-icon-link rh-block-icon-link--{{modifier}} rh-element--clickable rh-w--fit-content" tabindex="0">
    <a href="#" class="rh-element--clickable-link" title="" tabindex="-1"></a>

    {{ render '@button-circle--default' iconData merge=true }}

    <a href="#" class="rh-link--navigation rh-block-icon-link__link--{{modifier}} ml1" tabindex="-1">Block - Icon with Link</a>
</div>
 
{
  "name": "default",
  "modifier": "warning",
  "iconData": {
    "className": "rh-button-circle",
    "modifier": "large",
    "icon": "icon-mic-off",
    "extendClass": "rh-block-icon-link__icon--warning",
    "isUnderLarge": false,
    "tabIndex": -1,
    "priority": "warning"
  }
}
  • Content: 
    .rh-block-icon-link {
    display: flex;
    align-items: center;

    &--default {
        // Base settings are using for making new classes during generation
        $blockIconLinkClassname: "rh-block-icon-link--default";
        $blockIconLinkIconClassname: "rh-block-icon-link__icon--default";
        $blockIconLinkLinkClassname: "rh-block-icon-link__link--default";

        // Generation
        @include create-clickable-element-effect(
            $blockIconLinkClassname, //Container's name for block-icon-link
            $blockIconLinkLinkClassname, //Link's classname
            false, //description classname
            false, //outside - Only true or false
            true, //inside - Only true or false
            false, //border-top styling
            false, //border-right styling
            false, //border-bottom styling
            false, //border-left styling
            false, //box-shadow when :hover, :active
            false, //box-shadow when :focus-within (Using for <div> tag)
            false,//title color
            underline, //title text-decoration
            false, //description color
            false //description text-decoration
        ) {
            // Extend effects for only icon
            @include create-icon-button-effect(
                $blockIconLinkClassname, //Container's name for block-icon-link
                $blockIconLinkIconClassname, //icon's classname
                $BLOCKICONLINK__ICON--DEFAULT-HIGHLIGHT-BACKGROUND-COLOR, //icon's background
                $BLOCKICONLINK__ICON--DEFAULT-HIGHLIGHT-COLOR //icon's color
            )
        }
    }

    &--secondary {
        // Base settings are using for making new classes during generation
        $blockIconLinkClassname: "rh-block-icon-link--secondary";
        $blockIconLinkIconClassname: "rh-block-icon-link__icon--secondary";
        $blockIconLinkLinkClassname: "rh-block-icon-link__link--secondary";

        // Generation
        @include create-clickable-element-effect(
            $blockIconLinkClassname, //Container's name for block-icon-link
            $blockIconLinkLinkClassname, //Link's classname
            false, //description classname
            false, //outside - Only true or false
            true, //inside - Only true or false
            false, //border-top styling
            false, //border-right styling
            false, //border-bottom styling
            false, //border-left styling
            false, //box-shadow when :hover, :active
            false, //box-shadow when :focus-within (Using for <div> tag)
            false,//title color
            underline, //title text-decoration
            false, //description color
            false //description text-decoration
        ) {
            // Extend effects for only icon
            @include create-icon-button-effect(
                $blockIconLinkClassname, //Container's name for block-icon-link
                $blockIconLinkIconClassname, //icon's classname
                $BLOCKICONLINK__ICON--SECONDARY-HIGHLIGHT-BACKGROUND-COLOR, //icon's background
                $BLOCKICONLINK__ICON--SECONDARY-HIGHLIGHT-COLOR //icon's color
            )
        }
    }

    &--warning {
        // Base settings are using for making new classes during generation
        $blockIconLinkClassname: "rh-block-icon-link--warning";
        $blockIconLinkIconClassname: "rh-block-icon-link__icon--warning";
        $blockIconLinkLinkClassname: "rh-block-icon-link__link--warning";

        // Generation
        @include create-clickable-element-effect(
            $blockIconLinkClassname, //Container's name for block-icon-link
            $blockIconLinkLinkClassname, //Link's classname
            false, //description classname
            false, //outside - Only true or false
            true, //inside - Only true or false
            false, //border-top styling
            false, //border-right styling
            false, //border-bottom styling
            false, //border-left styling
            false, //box-shadow when :hover, :active
            false, //box-shadow when :focus-within (Using for <div> tag)
            false,//title color
            underline, //title text-decoration
            false, //description color
            false //description text-decoration
        ) {
            // Extend effects for only icon
            @include create-icon-button-effect(
                $blockIconLinkClassname, //Container's name for block-icon-link
                $blockIconLinkIconClassname, //icon's classname
                $BLOCKICONLINK__ICON--WARNING-HIGHLIGHT-BACKGROUND-COLOR, //icon's background
                $BLOCKICONLINK__ICON--WARNING-HIGHLIGHT-COLOR //icon's color
            )
        }
    }
}
  • URL: /components/raw/block-icon-link/_block-icon-link.scss
  • Filesystem Path: components/Molecules/block-icon-link/_block-icon-link.scss
  • Size: 4.8 KB
  • Content: 
    /// Molecule - Block - Icon Link
$BLOCKICONLINK__ICON--DEFAULT-HIGHLIGHT-BACKGROUND-COLOR: $base3-light; // false
$BLOCKICONLINK__ICON--DEFAULT-HIGHLIGHT-COLOR: $black; //false

$BLOCKICONLINK__ICON--SECONDARY-HIGHLIGHT-BACKGROUND-COLOR: $base3; // false
$BLOCKICONLINK__ICON--SECONDARY-HIGHLIGHT-COLOR: $white; //false

$BLOCKICONLINK__ICON--WARNING-HIGHLIGHT-BACKGROUND-COLOR: $warning; // false
$BLOCKICONLINK__ICON--WARNING-HIGHLIGHT-COLOR: false; //false
  • URL: /components/raw/block-icon-link/block-icon-link.settings.scss
  • Filesystem Path: components/Molecules/block-icon-link/block-icon-link.settings.scss
  • Size: 460 Bytes
  • Content: 
    {
    "name": "regionhalland/block-icon-link",
    "description": "A block with icon and link",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/block-icon-link/composer.json
  • Filesystem Path: components/Molecules/block-icon-link/composer.json
  • Size: 310 Bytes

Block - Icon Link

  • Komponents prefix: rh-block-icon-link*
  • Filplats: /components/Molecules/block-icon-link
  • Beskrivning: komponenten är en grupp av en ikon och en länk som står bredvid varandra. Hela gruppen är klickbar.
  • Återanvändning av:
    • Atoms/button-circle
    • Utilities/:
      • rh-element–clickable
      • rh-w–fit-content
      • o.s.v.
    • @mixin

1. Varianter

Namn Beskrivning
--default
--secondary
--warning Används för viktig eller varning information

2. Användning

<div class="rh-block-icon-link rh-block-icon-link--default rh-element--clickable rh-w--fit-content" tabindex="0">
    <a href="#" class="rh-element--clickable-link" title="" tabindex="-1"></a>

    <span class="rh-circle-button rh-circle-button--default rh-circle-button--small rh-block-icon-link__icon--default mr1">
        <span class="icon-corner-left-up"></span>
    </span>

    <a href="#" class="rh-link--navigation rh-block-icon-link__link--default" tabindex="-1">Länk till annan webb plats</a>
</div>

3. Versionhistorik

1.0.0.202001231353 (2020-01-23)

  • Config uppdaterad för att matcha ändringar i “button circle”

1.0.0.20200124 (2020-01-24)

  • Förbättring av användning tabindex

1.0.0.20200123 (2020-01-23)

  • CSS-klassen --primary har bytts namn till --secondary för att det får konsekvensen från komponenten Atoms/button-circle.
  • Återanvändning av Atoms/button-circle när render funktion används.
  • Variablers namn i filen .settings.scss har bytts för användning av global variabler.

1.0.0.20191217 (2019-17-12)

  • Första version