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

News info 

<div class="rh-news-info">
    <div class="rh-news-info__title">
        <p class="rh-news-info__text">Publicerad:</p>
        <p class="rh-news-info__text">Ämne:</p>
    </div>
    <div class="rh-news-info__description">
        <p class="rh-news-info__text">
            <time datetime="2018-12-13">13 december 2018, kl 16.26</time>
        </p>
        <p>
            <a href="#">Organisation</a>,
            <a href="#">styrning</a>,
            <a href="#">kommunfakta</a>,
        </p>
    </div>
</div>
 
<div class="rh-news-info">
    <div class="rh-news-info__title">
        <p class="rh-news-info__text">{{publishInfo.text}}:</p>
        <p class="rh-news-info__text">{{subjectInfo.text}}:</p>
    </div>
    <div class="rh-news-info__description">
        <p class="rh-news-info__text">
            <time datetime="{{publishInfo.datetime.attrValue}}">{{publishInfo.datetime.text}}</time>
        </p>
        <p>
            {{#each subjectInfo.subjects}}
                <a href="#">{{text}}</a>,
            {{/each}}
        </p>
    </div>
</div>
 
{
  "publishInfo": {
    "text": "Publicerad",
    "datetime": {
      "text": "13 december 2018, kl 16.26",
      "attrValue": "2018-12-13"
    }
  },
  "subjectInfo": {
    "text": "Ämne",
    "subjects": [
      {
        "title": "",
        "toPage": "",
        "text": "Organisation"
      },
      {
        "title": "",
        "toPage": "",
        "text": "styrning"
      },
      {
        "title": "",
        "toPage": "",
        "text": "kommunfakta"
      }
    ]
  }
}
  • Content: 
    .rh-news-info {
    /* Box-modell/beteende */
    display: $NEWS-INFO--DISPLAY;

    /* Typografi */
    font-size: $NEWS-INFO--FONT-SIZE;

    /* Typografi */
    @include medium { font-size: $NEWS-INFO--MEDIUM--FONT-SIZE; }
    @include large { font-size: $NEWS-INFO--LARGE--FONT-SIZE; }

    &__title {
        /* Box-modell/beteende */
        margin-right: $NEWS-INFO__TITLE--MARGIN-RIGHT;
    }

    &__text {
        /* Typografi */
        color: $NEWS-INFO__TEXT--COLOR;
    }
}
  • URL: /components/raw/news-info/_news-info.scss
  • Filesystem Path: components/Molecules/news-info/_news-info.scss
  • Size: 487 Bytes
  • Content: 
    {
    "name": "regionhalland/news-info",
    "description": "News info",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/news-info/composer.json
  • Filesystem Path: components/Molecules/news-info/composer.json
  • Size: 287 Bytes
  • Content: 
    /* ************************* */
/*   Molekylen "News info"   */
/* ************************* */

$NEWS-INFO--DISPLAY: flex;
$NEWS-INFO--FONT-SIZE: $font-size--medium;
$NEWS-INFO--MEDIUM--FONT-SIZE: $font-size--medium;
$NEWS-INFO--LARGE--FONT-SIZE: $font-size--standard;

// news-info__title
$NEWS-INFO__TITLE--MARGIN-RIGHT: 30px;

// news-info__text
$NEWS-INFO__TEXT--COLOR: $grey-darkest;
  • URL: /components/raw/news-info/news-info.settings.scss
  • Filesystem Path: components/Molecules/news-info/news-info.settings.scss
  • Size: 389 Bytes

Molekyeln “News info”

Versionshistorik

  • 1.0.2 (2020-01-30) Globala variabler används.
  • 1.0.0 (3 jan 2020) Brytande ändringar: nya klassnamn enligt BEM, raderat överflödig kod, settingsfil skapad.
  • 1.0.0.20191122 Flyttat till gitrepo