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

Article group 

<div class="rh-article-group">
    <h3 class="rh-heading-underlined">Miljoner ska äng är björnbär hans</h3>

    <div class="rh-article-block">
        <div class="rh-article-block__publish-date">
            <span class="icon-clock rh-article-block__publish-date-icon"></span>
            <p class="rh-article-block__publish-date-info">Publicerad: <time datetime="2019-10-07" class="rh-dp--inline-block">2019-10-09</time></p>
        </div>

        <div>
            <h3 class="rh-article-block__title">
                <a class="rh-link--navigation rh-article-block__title-link" href="#" title="">
                Aliquam non posuere tortor, vel laoreet nulla
            </a>
            </h3>

            <p class="rh-article-block__description">
                In vel felis accumsan, ullamcorper enim gravida, aliquet lorem. Nam commodo gravida leo, quis venenatis nisl porta vel. Nam mollis dignissim ligula sit amet fermentum.
            </p>
            <span class="rh-label rh-label--small">Löksås</span> <span class="rh-label rh-label--small">Bäckasiner</span> <span class="rh-label rh-label--small">Vemod</span> </div>
    </div>
    <div class="rh-article-block">
        <div class="rh-article-block__publish-date">
            <span class="icon-clock rh-article-block__publish-date-icon"></span>
            <p class="rh-article-block__publish-date-info">Publicerad: <time datetime="2019-10-07" class="rh-dp--inline-block">2019-09-20</time></p>
        </div>

        <div>
            <h3 class="rh-article-block__title">
                <a class="rh-link--navigation rh-article-block__title-link" href="#" title="">
                Sed ultrices tempor velit eget posuere
            </a>
            </h3>

            <p class="rh-article-block__description">
                Vivamus eu semper ligula. Maecenas pellentesque, lorem eu tempor molestie, turpis mi molestie tellus, ut interdum orci lectus eget ligula.
            </p>
            <span class="rh-label rh-label--small">Löksås</span> <span class="rh-label rh-label--small">Bäckasiner</span> <span class="rh-label rh-label--small">Vemod</span> </div>
    </div>

    <div class="rh-article-group__view-more">
        <button class="rh-button rh-button--icon" aria-label="Text som förklarar funktionen om man lyssnar med talsyntes utan att se kontexten" role="button">Se alla artiklar</button>

    </div>
</div>
 
<div class="rh-article-group">
    {{ render '@heading-underlined--h3' }}

    {{#each articles}}
        {{render '@article-block' itemData merge=true}}
    {{/each}}

    <div class="rh-article-group__view-more">
        {{render '@button--with-icon' btnViewMore merge=true}}
    </div>
</div>
 
{
  "title": "Artiklar grupp",
  "articles": [
    {
      "itemData": {
        "title": "Aliquam non posuere tortor, vel laoreet nulla",
        "datetime": "2019-10-09",
        "description": "In vel felis accumsan, ullamcorper enim gravida, aliquet lorem. Nam commodo gravida leo, quis venenatis nisl porta vel. Nam mollis dignissim ligula sit amet fermentum."
      }
    },
    {
      "itemData": {
        "title": "Sed ultrices tempor velit eget posuere",
        "datetime": "2019-09-20",
        "description": "Vivamus eu semper ligula. Maecenas pellentesque, lorem eu tempor molestie, turpis mi molestie tellus, ut interdum orci lectus eget ligula."
      }
    }
  ],
  "btnViewMore": {
    "modifier": "icon",
    "text": "Se alla artiklar"
  }
}
  • Content: 
    /* Needed component 
* Molecules/article-block
*/

.rh-article-group {

    // Control article items
    .rh-article-block {
        @if $article-group-items--margin {
            margin: $article-group-items--margin;
        }
    }

    &__view-more {
        margin-top: $article-group__footer--margin-top;
    }
}
  • URL: /components/raw/article-group/_article-group.scss
  • Filesystem Path: components/Organisms/article-group/_article-group.scss
  • Size: 317 Bytes
  • Content: 
    /* Organism - Article group */
$article-group-items--margin: $space-6 0 0 0;
$article-group--border-bottom: $border-thin--medium $base3;
$article-group__footer--margin-top: $space-8;
  • URL: /components/raw/article-group/article-group.settings.scss
  • Filesystem Path: components/Organisms/article-group/article-group.settings.scss
  • Size: 182 Bytes
  • Content: 
    {
    "name": "regionhalland/article-group",
    "description": "Article group",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/article-group/composer.json
  • Filesystem Path: components/Organisms/article-group/composer.json
  • Size: 296 Bytes

Organismen “Article group”

Versionshistorik

  • 1.0.2 Globala variabler används.
  • 1.0.1 “Stabil” status.
  • 1.0.0 (2019-11-29) Klar. Använder nu atomen “heading underlined”.
  • 1.0.0.20191123 Flyttat till gitrepo.