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

Article block 

<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-07</time></p>
    </div>

    <div>
        <h3 class="rh-article-block__title">
            <a class="rh-link--navigation rh-article-block__title-link" href="#" title="">
                Den ursprungliga Lorem Ipsum-texten från 1500-talet
            </a>
        </h3>

        <p class="rh-article-block__description">
            I motsats till vad många tror, är inte Lorem Ipsum slumpvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt.
        </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">{{datetime}}</time></p>
    </div>

    <div>
        <h3 class="rh-article-block__title">
            <a class="rh-link--navigation rh-article-block__title-link" href="#" title="">
                {{title}}
            </a>
        </h3>

        <p class="rh-article-block__description">
            {{description}}
        </p>
        {{> @label className = "rh-label rh-label--small" labelContent = "Löksås"}}
        {{> @label className = "rh-label rh-label--small" labelContent = "Bäckasiner"}}
        {{> @label className = "rh-label rh-label--small" labelContent = "Vemod"}}
    </div>
</div>
 
{
  "title": "Den ursprungliga Lorem Ipsum-texten från 1500-talet",
  "datetime": "2019-10-07",
  "description": "I motsats till vad många tror, är inte Lorem Ipsum slumpvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt."
}
  • Content: 
    // View mixin at /components/scss/_mixin-components.scss

.rh-article-block {
	&__publish-date {
		display: flex;

		&-info {
			margin: $ARTICLE-BLOCK__PUBLISH-DATE-INFO--MARGIN;
			font-size: $ARTICLE-BLOCK__PUBLISH-DATE-INFO--FONT-SIZE;

			@include large {
				font-size: $ARTICLE-BLOCK__PUBLISH-DATE-INFO--LARGE-FONT-SIZE;
			}
		}

		&-icon {
			font-family: $ARTICLE-BLOCK__PUBLISH-DATE-ICON--FONT-FAMILY;
			font-size: $ARTICLE-BLOCK__PUBLISH-DATE-ICON--FONT-SIZE;
			margin: $ARTICLE-BLOCK__PUBLISH-DATE-ICON--MARGIN;

			@include large {
				margin: $ARTICLE-BLOCK__PUBLISH-DATE-ICON--LARGE-MARGIN;
			}
		}
	}

	&__title {
		line-height: $ARTICLE-BLOCK__TITLE--LINE-HEIGHT;
		margin-bottom: 0.1em;

		@if $ARTICLE-BLOCK__TITLE--FONT-SIZE {
			font-size: $ARTICLE-BLOCK__TITLE--FONT-SIZE;
		}
		font-weight: bold;

		@include medium {
			line-height: $ARTICLE-BLOCK__TITLE--MEDIUM-LINE-HEIGHT;
		}

		@include large {
			font-size: $ARTICLE-BLOCK__TITLE--LARGE-FONT-SIZE; //20px
		}

		&-link {
			color: $ARTICLE-BLOCK__TITLE-LINK--TEXT-COLOR;

			&:focus {
				text-decoration: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--TEXT-DECORATION;
				color: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--COLOR;
				outline: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--OUTLINE;
				background-color: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--BACKGROUND-COLOR;
				padding-top: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-TOP;
				padding-bottom: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-BOTTOM;
				padding-left: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-LEFT;
				padding-right: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-RIGHT;
				border-radius: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-RADIUS;
				border-top: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-TOP;
				border-bottom: $ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-BOTTOM;
			}
		}
	}

	&__description {
		margin-top: 0.5em;
		margin-bottom: 0.5em;

		font-size: $ARTICLE-BLOCK__DESCRIPTION--FONT-SIZE; //15px

		@include large {
			font-size: $ARTICLE-BLOCK__DESCRIPTION--LARGE-FONT-SIZE; //16px
		}
	}
}
  • URL: /components/raw/article-block/_article-block.scss
  • Filesystem Path: components/Molecules/article-block/_article-block.scss
  • Size: 2 KB
  • Content: 
    /* Molecules - Article block */
$ARTICLE-BLOCK__PUBLISH-DATE-INFO--MARGIN: 0;
$ARTICLE-BLOCK__PUBLISH-DATE-INFO--FONT-SIZE: $font-size--xs; //13px - Using for medium screen and down
$ARTICLE-BLOCK__PUBLISH-DATE-INFO--LARGE-FONT-SIZE: $font-size-small; //14px

$ARTICLE-BLOCK__PUBLISH-DATE-ICON--FONT-FAMILY: $icon--font-family;
$ARTICLE-BLOCK__PUBLISH-DATE-ICON--FONT-SIZE: $font-size--xs; //13px;
$ARTICLE-BLOCK__PUBLISH-DATE-ICON--MARGIN: .118em .3em 0 0;
$ARTICLE-BLOCK__PUBLISH-DATE-ICON--LARGE-MARGIN: .195em .3em 0 0;

$ARTICLE-BLOCK__TITLE--LINE-HEIGHT: $line-height--large; // Using for small screen and down
$ARTICLE-BLOCK__TITLE--MEDIUM-LINE-HEIGHT: $line-height--xl;
$ARTICLE-BLOCK__TITLE--FONT-SIZE: $font-size--standard; // false - Using for medium screen and down
$ARTICLE-BLOCK__TITLE--LARGE-FONT-SIZE: $font-size--xl;

$ARTICLE-BLOCK__TITLE-LINK--TEXT-COLOR: $color-primary;

// Focus state settings
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--TEXT-DECORATION: none;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--COLOR: $color-primary;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--OUTLINE: none;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--BACKGROUND-COLOR: $grey-lightest;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-TOP: .3ex;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-BOTTOM: .4ex;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-LEFT: .2ex;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--PADDING-RIGHT: .4ex;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-RADIUS: $border-radius--standard;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-TOP: none;
$ARTICLE-BLOCK__TITLE-LINK--FOCUS--BORDER-BOTTOM: 2px solid $color-primary;

$ARTICLE-BLOCK__DESCRIPTION--FONT-SIZE: $font-size--medium; // Using for medium screen and down
$ARTICLE-BLOCK__DESCRIPTION--LARGE-FONT-SIZE: $font-size--standard;
  • URL: /components/raw/article-block/article-block.settings.scss
  • Filesystem Path: components/Molecules/article-block/article-block.settings.scss
  • Size: 1.7 KB
  • Content: 
    {
    "name": "regionhalland/article-block",
    "description": "Article block",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/article-block/composer.json
  • Filesystem Path: components/Molecules/article-block/composer.json
  • Size: 295 Bytes

Article block

Versionhistorik

1.0.6 (2020-01-27)

  • Variabler namn har bytt.
  • Globala variabler används.
  • Förbättring av SCSS-kod (:focus)

1.0.5 (2020-01-23)

  • Sökväg till Atoms/button-circle justerad efter namnbyte.

1.0.4 (2020-01-17)

  • Status “stable”.

1.0.3 (2019-12-17)

  • Använda inte längre @mixin för en bättre kontroll.

1.0.2

  • Tweakat .hbs-filen för att rendera labels istället för att hårdkoda.

1.0.1

  • Labels från skiss och tidigare implementation återställda.

1.0.0

  • Första versionen lanserad.