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

Search elements 

<div class="rh-search-elements">
    <h2 class="h3 rh-search-elements__headline">
        <a href="#" class="rh-link rh-link--navigation" title="Förklara vart länken leder">Redan faktor omfångsrik</a> </h2>
    <span>
        24 maj 2018 | Webbsida
    </span>
    <p class="rh-search-elements__description">
        Löksås ipsum miljoner sorgliga stig bäckasiner hav ordningens brunsås gör, bland blivit som brunsås vad därmed icke och upprätthållande kunde, ordningens mot hwila annat tiden dock sjö stig.
    </p>
    <ul aria-label="Sökträffens breadcrumbs">
        <li class="rh-search-elements__breadcrumb-item">
            <a href="#" class="rh-link rh-link--navigation rh-search-elements__breadcrumb" title="Förklara vart länken leder">Upprätthållande i regn</a> <span class="rh-search-elements__divider"></span>
        </li>
        <li class="rh-search-elements__breadcrumb-item">
            <a href="#" class="rh-link rh-link--navigation rh-search-elements__breadcrumb" title="Förklara vart länken leder">som bäckasiner</a> <span class="rh-search-elements__divider"></span>
        </li>
        <li class="rh-search-elements__breadcrumb-item">
            <a href="#" class="rh-link rh-link--navigation rh-search-elements__breadcrumb" title="Förklara vart länken leder">sig mjukt vidsträcka</a>
        </li>
    </ul>
</div>
 
<div class="rh-search-elements">
    <h2 class="h3 rh-search-elements__headline">
        {{> @link--navigation modifier="navigation" text=headline className="rh-link"}}
    </h2>
    <span>
        {{date}} | {{type}}
    </span>
    {{#unless with-icon}}
        <p class="rh-search-elements__description">
            {{description}}
        </p>
    {{/unless}}
    {{#if with-icon}}
        <div class="rh-search-elements__pdf">
            <p class="rh-search-elements__description">
                {{description}}
            </p>
            {{> @button-circle--small icon="icon-download" className="rh-button-circle" modifier="small"}}
        </div>
    {{/if}}
    {{#unless labels }}
        <ul aria-label="Sökträffens breadcrumbs">
        {{#each breadcrumbs}}
            <li class="rh-search-elements__breadcrumb-item">
                {{> @link--navigation modifier="navigation" text=this className="rh-link" extendClass="rh-search-elements__breadcrumb"}}
                {{#unless @last}}<span class="rh-search-elements__divider"></span>{{/unless}}
            </li>
        {{/each}}
        </ul>
    {{/unless}}
    {{#if labels}}
        {{#each labels}}
            {{> @label className="rh-label" modifier="small" labelContent=this}}
        {{/each}}
    {{/if}}
</div>
 
{
  "caption": "",
  "name": "",
  "headline": "Redan faktor omfångsrik",
  "date": "24 maj 2018",
  "type": "Webbsida",
  "description": "Löksås ipsum miljoner sorgliga stig bäckasiner hav ordningens brunsås gör, bland blivit som brunsås vad därmed icke och upprätthållande kunde, ordningens mot hwila annat tiden dock sjö stig.",
  "breadcrumbs": [
    "Upprätthållande i regn",
    "som bäckasiner",
    "sig mjukt vidsträcka"
  ]
}
  • Content: 
    .rh-search-elements {

    &__description {
        padding-top: $SEARCH-ELEMENTS__DESCRIPTION--PADDING-TOP;
    }

    &__headline {
        line-height: $SEARCH-ELEMENTS__HEADLINE--LINE-HEIGHT;
        padding-bottom: $SEARCH-ELEMENTS__HEADLINE--PADDING-BOTTOM;
    }

    &__breadcrumb-item {
        display: $SEARCH-ELEMENTS__BREADCRUMB-ITEM--DISPLAY;
    }

    &__breadcrumb {
        color: $SEARCH-ELEMENTS__BREADCRUMB--COLOR;
        font-size: $SEARCH-ELEMENTS__BREADCRUMB--FONT-SIZE;
    }

    &__divider:after {
        color: $SEARCH-ELEMENTS__DIVIDER--COLOR;
        font-size: $SEARCH-ELEMENTS__DIVIDER--FONT-SIZE;
        margin-left: $SEARCH-ELEMENTS__DIVIDER--MARGIN-LEFT;
        font-family: $SEARCH-ELEMENTS__DIVIDER--FONT-FAMILY; 
        content: $SEARCH-ELEMENTS__DIVIDER--CONTENT;
    }

    &__pdf {
        display: $SEARCH-ELEMENTS__PDF--DISPLAY;
        align-items: $SEARCH-ELEMENTS__PDF--ALIGN-ITEMS;

        .rh-circle-button {
            margin-left: $SEARCH-ELEMENTS__CIRCLE-BUTTON--MARGIN-LEFT;
            margin-top: $SEARCH-ELEMENTS__CIRCLE-BUTTON--MARGIN-TOP;
        }
    }
}
  • URL: /components/raw/search-elements/_search-elements.scss
  • Filesystem Path: components/Molecules/search-elements/_search-elements.scss
  • Size: 1.1 KB
  • Content: 
    {
    "name": "regionhalland/search-elements",
    "description": "search elements",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/search-elements/composer.json
  • Filesystem Path: components/Molecules/search-elements/composer.json
  • Size: 299 Bytes
  • Content: 
    /* ******************************* */
/*   Molekylen "search elements"   */
/* ******************************* */

$SEARCH-ELEMENTS__DESCRIPTION--PADDING-TOP: 1ex;

$SEARCH-ELEMENTS__HEADLINE--LINE-HEIGHT: 1.3;
$SEARCH-ELEMENTS__HEADLINE--PADDING-BOTTOM: 0.7ex;

$SEARCH-ELEMENTS__BREADCRUMB-ITEM--DISPLAY: inline;
$SEARCH-ELEMENTS__BREADCRUMB--COLOR: $grey-dark;
$SEARCH-ELEMENTS__BREADCRUMB--FONT-SIZE: $font-size--medium;

$SEARCH-ELEMENTS__DIVIDER--COLOR: $grey-dark;
$SEARCH-ELEMENTS__DIVIDER--FONT-SIZE: $font-size--small;
$SEARCH-ELEMENTS__DIVIDER--MARGIN-LEFT: 0.3125em; //em(5);
$SEARCH-ELEMENTS__DIVIDER--FONT-FAMILY: $icon--font-family;
$SEARCH-ELEMENTS__DIVIDER--CONTENT: "\e844";

$SEARCH-ELEMENTS__PDF--DISPLAY: flex;
$SEARCH-ELEMENTS__PDF--ALIGN-ITEMS: flex-start;

$SEARCH-ELEMENTS__CIRCLE-BUTTON--MARGIN-LEFT: 1em;
$SEARCH-ELEMENTS__CIRCLE-BUTTON--MARGIN-TOP: 1ex;
  • URL: /components/raw/search-elements/search-elements.settings.scss
  • Filesystem Path: components/Molecules/search-elements/search-elements.settings.scss
  • Size: 881 Bytes

Molekylen “Search elements”

Implementeringsråd

  • Byt alla rubriknivåer mot de som är korrekta för rubriknästlingen i din implementation

Versionshistorik

  • 1.0.0.20200130 Globala variabler används.
  • 1.0.0.20200123 Justerat rendering av atomer för link, button circle och label.
  • 1.0.0.20200108 Brytande ändringar: Stor refaktorering av HTML, CSS, .hbs och config-fil. Settingsfil skapad.
  • 1.0.0.20191122 Flyttat till gitrepo