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

Search elements: Nyhet 

<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">Vidsträckt dock i så på mot gamla där färdväg och sjö</a> </h2>
    <span>
        3 februari 2020 | Nyhet
    </span>
    <p class="rh-search-elements__description">
        Erfarenheter varit vid jäst år samtidigt gamla rot dimma vemod stig hav sista hans vi vid sig ordningens där annat, färdväg både sorgliga denna på bra ordningens händer som samma har rännil helt rot ingalunda vad erfarenheter denna.
    </p>
    <span class="rh-label rh-label--small">dimmhöljd</span> <span class="rh-label rh-label--small">upprätthållande</span> <span class="rh-label rh-label--small">vemod</span></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": "Vidsträckt dock i så på mot gamla där färdväg och sjö",
  "date": "3 februari 2020",
  "type": "Nyhet",
  "description": "Erfarenheter varit vid jäst år samtidigt gamla rot dimma vemod stig hav sista hans vi vid sig ordningens där annat, färdväg både sorgliga denna på bra ordningens händer som samma har rännil helt rot ingalunda vad erfarenheter denna.",
  "breadcrumbs": [
    "Vidsträckt dock",
    "där färdväg och sjö",
    "bland hwila"
  ],
  "labels": [
    "dimmhöljd",
    "upprätthållande",
    "vemod"
  ]
}
  • 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