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

List 

<div class="rh-lists">
    <h4 class="rh-lists-title">Title lorem ipsum</h4>

    <div class="rh-lists-items">
        <p class="rh-lists-items-left">Egestas</p>
        <p class="rh-lists-items-right">Sem eu, elementum a justo.</p>
        <hr class="rh-lists-items-hr">
    </div>

    <div class="rh-lists-items">
        <p class="rh-lists-items-left">Ac purus.</p>
        <p class="rh-lists-items-right">Diam hac, lorem accumsan.</p>
        <hr class="rh-lists-items-hr">
    </div>

    <div class="rh-lists-items">
        <p class="rh-lists-items-left">Commodo suspendisse.</p>
        <p class="rh-lists-items-right">Elit ut.</p>
        <hr class="rh-lists-items-hr">
    </div>

    <div class="rh-lists-items">
        <p class="rh-lists-items-left">Sit feugiat porta.</p>
        <p class="rh-lists-items-right">Vitae eu, ac in, aenean enim</p>
        <hr class="rh-lists-items-hr">
    </div>

</div>
 
<div class="rh-lists">
	<h4 class="rh-lists-title">{{listTitle}}</h4>

    {{#each listItems}}
    <div class="rh-lists-items">
		<p class="rh-lists-items-left">{{textLeft}}</p>
		<p class="rh-lists-items-right">{{textRight}}</p>
		<hr class="rh-lists-items-hr">
	</div>
    
    {{/each}}

</div>
 
{
  "listTitle": "Title lorem ipsum",
  "listItems": [
    {
      "textLeft": "Egestas",
      "textRight": "Sem eu, elementum a justo."
    },
    {
      "textLeft": "Ac purus.",
      "textRight": "Diam hac, lorem accumsan."
    },
    {
      "textLeft": "Commodo suspendisse.",
      "textRight": "Elit ut."
    },
    {
      "textLeft": "Sit feugiat porta.",
      "textRight": "Vitae eu, ac in, aenean enim"
    }
  ]
}
  • Content: 
    .rh-lists{
    /* Box-modell/beteende */
    padding: $space-5; //em(20);

    /* Visuellt */
    background-color: $grey-lightest;

    /* Typografi */
	text-align: center;

	&-title{
        /* Typografi */
		font-weight: normal;
	}

	&-items{
        /* Box-modell/beteende */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: $space-3; //em(10);

        /* Box-modell/beteende */
		@include medium{max-width: 80%;}
		@include large{max-width: 60%;}

		&-left{
            /* Box-modell/beteende */
			margin-bottom: 0;
            margin-right: auto;

            /* Typografi */
			font-weight: bold;
		}
		&-right{
            /* Box-modell/beteende */
			margin-bottom: 0;
			margin-left: auto;
		}

		&-hr{
            /* Box-modell/beteende */
            flex-basis: 100%;
			height: 1px;
			margin-top: $space-8; //em(15);

            /* Typografi */
			color: $grey-light;
		}
	}
}
  • URL: /components/raw/lists/_lists.scss
  • Filesystem Path: components/Molecules/lists/_lists.scss
  • Size: 991 Bytes
  • Content: 
    {
    "name": "regionhalland/lists",
    "description": "Lists",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/lists/composer.json
  • Filesystem Path: components/Molecules/lists/composer.json
  • Size: 279 Bytes

Molekylen “Lists”

Planerad utveckling

  • Säkerställa funktion på Internet Explorer 11.
  • Behöver hantera mindre viewports genom att t.ex. vänsterjustera all text.

Versioner

  • 1.0.0.20200203 Globala variabler används.
  • 1.0.0.20191121 Flyttat till gitrepo
  • 1.0.0.20191114 Status ‘rework’ och lagt nödvändig utveckling i readme.