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

Messages 

<div class="rh-message">
    <span class="rh-message-icon"></span>
    <div class="rh-message-text">
        <h5 class="rh-message-text-title">Viktigt meddelande</h5>
        <p><time datetime="2018-08-30">30 augusti 2018</time></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minom veniam, quis nostrud extercitation laboris nisi ut aliquip ex.</p>
        <p><a class="rh-message-text-link" href="#">Läs mer om Driftströningen</a></p>
    </div>
</div>
 
<div class="rh-message">
	<span class="rh-message-icon"></span>
	<div class="rh-message-text">
		<h5 class="rh-message-text-title">{{title}}</h5>
		<p><time datetime="{{datetime.attrValue}}">{{datetime.text}}</time></p>
		<p>{{description}}</p>
		<p><a class="rh-message-text-link" href="{{viewMoreLink.linkTo}}">{{viewMoreLink.linkText}}</a></p>
	</div>
</div>
 
{
  "title": "Viktigt meddelande",
  "datetime": {
    "text": "30 augusti 2018",
    "attrValue": "2018-08-30"
  },
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minom veniam, quis nostrud extercitation laboris nisi ut aliquip ex.",
  "viewMoreLink": {
    "linkTo": "#",
    "linkText": "Läs mer om Driftströningen"
  }
}
  • Content: 
    .rh-message {
    /* Box-modell/beteende */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
    padding: $message--padding; //em(30);
    
    /* Visuellt */
    background-color: $message--background-color;
    
    /* Typografi */
	text-align: $message--text-align;
    line-height: $message--line-height;
    
	@include medium {
        /* Box-modell/beteende */
		flex-wrap: nowrap;
		//padding-top: em(20);
        //padding-bottom: em(20);
        padding: $message--padding-medium;
        
        /* Typografi */
		text-align: left;
	}
	
	&-icon {
        /* Box-modell/beteende */
		margin-left: auto;
        margin-right: auto;
        
      	@include medium {
            /* Box-modell/beteende */
      		//margin-top: em(40);
      		//margin-bottom: em(40);
      		//margin-right: em(40);
            //margin-left: 0; //em(20);
            margin: $message__icon--margin-medium;
      	}
		&:after {
            /* Box-modell/beteende */
            padding: $message__icon--padding; //em(8);
            
            /* Visuellt */
            background: $message__icon--color; //$complementary3-dark;
            border-radius: 50%;
            
            /* Typografi */
			color: $message__icon--text-color; //$white;
			font-weight: $message__icon--font-weight;
	    	font-family: $message__icon--font-family; 
            font-size: $message__icon--font-size;
            
            /* Blandat/övrigt */
            content: $message__icon--content;
            
            /* Typografi */
			@include medium { font-size: $message__icon--font-size-medium;}
			@include large { font-size: $message__icon--font-size-large;}
		}
	}

	&-text{
		/* Box-modell/beteende */
		//@include medium { max-width: 539px;}
		//@include large { max-width: 865px;}

		&-title	{
            /* Typografi */
			color: $message__text-title--color;
		}

		&-link {
            /* Typografi */
			text-decoration: $message__link--text-decoration;
			color: $message__link--color;

			&:hover{
                /* Typografi */
				text-decoration: $message__link--text-decoration-hover;
				color: $message__link--color-hover;
			}
		}
	}
}
  • URL: /components/raw/messages/_messages.scss
  • Filesystem Path: components/Molecules/messages/_messages.scss
  • Size: 2.2 KB
  • Content: 
    {
    "name": "regionhalland/messages",
    "description": "messages",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/messages/composer.json
  • Filesystem Path: components/Molecules/messages/composer.json
  • Size: 285 Bytes
  • Content: 
    /* Molecules - Message */
$message--padding: $space-8 $space-0; //1.875em 0; //30px
$message--padding-medium: $space-5 $space-0; //1.25em 0; //20px
$message--background-color: $complementary3-light; //#E3B7BE;
$message--text-align: center;
$message--line-height: $line-height--small; //1em;

$message__icon--content: "\e81e";
$message__icon--margin-medium: $space-10 $space-10 $space-10 $space-0; //2.5em 2.5em 2.5em 0;
$message__icon--padding: $space-2; //0.5em; //8px
$message__icon--color: $complementary3-dark; //#700B1B;
$message__icon--text-color: $white; //ffffff;
$message__icon--font-weight: normal;
$message__icon--font-family: $icon--font-family;
$message__icon--font-size: $p-small;
$message__icon--font-size-medium: $h4-medium;
$message__icon--font-size-large: $h2-large;

$message__text-title--color: $complementary3-dark; //#700B1B;
$message__link--color: $black;
$message__link--color-hover: $black;
$message__link--text-decoration: underline;
$message__link--text-decoration-hover: none;
  • URL: /components/raw/messages/message.settings.scss
  • Filesystem Path: components/Molecules/messages/message.settings.scss
  • Size: 1 KB

Molekyeln “Messages”

Versionshistorik

  • 1.0.0.20200203 Globala variabler används
  • 1.0.0.20191122 Flyttat till gitrepo