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

Event card calender: Default 

<div class="rh-event-card-calendar">
    <div class="rh-event-card-calendar__date">
        <div class="rh-event-card-calendar__day"><strong>01</strong></div>
        <div class="rh-event-card-calendar__month">oct</div>
    </div>

    <div class="rh-event-card-calendar__description">
        <h3 class="rh-event-card-calendar__title"><a class="rh-event-card-calendar__link">Sed ut perspiciatis unde omnis iste natus</a></h3>
        <span class="rh-event-card-calendar__time">
            08.30 - 09.30
        </span>

        <span>|</span>

        <span class="rh-event-card-calendar__venue">
                Platser finns
            </span>

        <p class="rh-event-card-calendar__text">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

        <span class="rh-label rh-label--small">Kultur</span> <span class="rh-label rh-label--small">Kulturevenemang</span> <span class="rh-label rh-label--small">Dans</span> </div>
</div>
 
<div class="rh-event-card-calendar">
    <div class="rh-event-card-calendar__date">
        <div class="rh-event-card-calendar__day"><strong>{{date.day}}</strong></div>
        <div class="rh-event-card-calendar__month">{{date.month}}</div>
    </div>

    <div class="rh-event-card-calendar__description">
        <h3 class="rh-event-card-calendar__title"><a class="rh-event-card-calendar__link">{{title}}</a></h3>
        <span class="rh-event-card-calendar__time">
            {{time.start}} - {{time.end}}
        </span>

        <span>|</span>

        {{#if availability}}
            <span class="rh-event-card-calendar__venue">
                Platser finns
            </span>
        {{else}}
            <span class="rh-event-card-calendar__venue rh-event-card-calendar__venue--sold-out">
                Fullbokat
            </span>
        {{/if}}

        <p class="rh-event-card-calendar__text">{{description}}</p>

        {{> @label className="rh-label rh-label--small" labelContent=labelcontent1 }}
        {{> @label className="rh-label rh-label--small" labelContent=labelcontent2 }}
        {{> @label className="rh-label rh-label--small" labelContent=labelcontent3 }}
    </div>
</div>
 
{
  "title": "Sed ut perspiciatis unde omnis iste natus",
  "date": {
    "day": "01",
    "month": "oct"
  },
  "time": {
    "start": "08.30",
    "end": "09.30"
  },
  "availability": true,
  "description": "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?",
  "labelcontent1": "Kultur",
  "labelcontent2": "Kulturevenemang",
  "labelcontent3": "Dans"
}
  • Content: 
    .rh-event-card-calendar {
    /* Positionering */
    align-items: $EVENT-CARD-CALENDAR--ALIGN-ITEMS;

    /* Box-modell/beteende */
    display: $EVENT-CARD-CALENDAR--DISPLAY;

    &--small {
        /* Positionering */
        align-items: $EVENT-CARD-CALENDAR--SMALL--ALIGN-ITEMS;

        /* Box-modell/beteende */
        margin-top: $EVENT-CARD-CALENDAR--SMALL--MARGIN-TOP;
    }

    &__date {
        /* Positionering */
        align-content: $EVENT-CARD-CALENDAR__DATE--ALIGN-CONTENT;

        /* Box-modell/beteende */
        flex: $EVENT-CARD-CALENDAR__DATE--FLEX;
        height: $EVENT-CARD-CALENDAR__DATE--HEIGHT;
        width: $EVENT-CARD-CALENDAR__DATE--WIDTH;

        /* Visuellt */
        background-color: $EVENT-CARD-CALENDAR__DATE--BACKGROUND-COLOR;

        /* Typografi */
        text-align: $EVENT-CARD-CALENDAR__DATE--TEXT-ALIGN;

        @include medium {
            /* Box-modell/beteende */
            flex: $EVENT-CARD-CALENDAR__DATE--MEDIUM--FLEX;
            height: $EVENT-CARD-CALENDAR__DATE--MEDIUM--HEIGHT;
            width: $EVENT-CARD-CALENDAR__DATE--MEDIUM--WIDTH;
        }
    }

    &__day {
        /* Box-modell/beteende */
        margin-top: $EVENT-CARD-CALENDAR__DAY--MARGIN-TOP;

        /* Typografi */
        color: $EVENT-CARD-CALENDAR__DAY--COLOR;
        line-height: $EVENT-CARD-CALENDAR__DAY--LINE-HEIGHT;

        @include medium {
            /* Box-modell/beteende */
            margin-top: $EVENT-CARD-CALENDAR__DAY--MEDIUM--MARGIN-TOP;
        }

        @include large {
            /* Box-modell/beteende */
            margin-top: $EVENT-CARD-CALENDAR__DAY--LARGE--MARGIN-TOP;
        }
    }

    &__month {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__MONTH--COLOR;
        line-height: $EVENT-CARD-CALENDAR__MONTH--LINE-HEIGTH;
        font-weight: $EVENT-CARD-CALENDAR__MONTH--FONT-WEIGHT;
    }

    &__description {
        /* Box-modell/beteende */
        margin-left: $EVENT-CARD-CALENDAR__DESCRIPTION--MARGIN-LEFT;
    }

    &__title {
        /* Typografi */
        line-height: $EVENT-CARD-CALENDAR__TITLE--LINE-HEIGHT; 
    }

    &__text {
        padding-top: $EVENT-CARD-CALENDAR--TEXT--PADDING-TOP;
    }

    &__link {
        /* Typografi */
        font-size: $EVENT-CARD-CALENDAR__LINK--FONT-SIZE;
        text-decoration: $EVENT-CARD-CALENDAR__LINK--TEXT-DECORATION;
        color: $EVENT-CARD-CALENDAR__LINK--COLOR;

        /* Blandat/övrigt */
        cursor: $EVENT-CARD-CALENDAR__LINK--CUROSR;

        &:hover,
        &:active {
            /* Typografi */
            text-decoration: $EVENT-CARD-CALENDAR__LINK--HOVER--TEXT-DECORATION;
        }

        &:visited {
            /* Typografi */
            color: $EVENT-CARD-CALENDAR__LINK--VISITED--COLOR;
        }
    }

    &__time {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__TIME--COLOR;

        &:before {
            /* Typografi */
            font-family: $EVENT-CARD-CALENDAR__TIME--BEFORE--FONT-FAMILY;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__TIME--BEFORE--CONTENT;
        }

        &-small {
            /* Box-modell/beteende */
            margin-bottom: $EVENT-CARD-CALENDAR__TIME--SMALL--MARGIN-BOTTOM;

            /* Typografi */
            line-height: $EVENT-CARD-CALENDAR__TIME--SMALL--LINE-HEIGHT;
        }
    }

    &__venue {
        /* Typografi */
        color: $EVENT-CARD-CALENDAR__VENUE--COLOR;

        &:before {
            /* Typografi */
            font-family: $EVENT-CARD-CALENDAR__VENUE--BEFORE--FONT-FAMILY; 
            color: $EVENT-CARD-CALENDAR__VENUE--BEFORE--COLOR;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__VENUE--BEFORE--CONTENT;
        }

        &--small {
            /* Box-modell/beteende */
            margin-bottom: $EVENT-CARD-CALENDAR__VENUE--SMALL--MARGIN-BOTTOM;

            /* Typografi */
            line-height: $EVENT-CARD-CALENDAR__VENUE--SMALL--LINE-HEIGHT;
        }
    }

    &__venue--sold-out {
        &:before {
            /* Typografi */
            color: $EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--COLOR;

            /* Blandat/övrigt */
            content: $EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--CONTENT;
        }
    }
}
  • URL: /components/raw/event-card-calendar/_event-card-calendar.scss
  • Filesystem Path: components/Molecules/event-card-calendar/_event-card-calendar.scss
  • Size: 4.3 KB
  • Content: 
    {
    "name": "regionhalland/event-card-calendar",
    "description": "Event card calendar",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/event-card-calendar/composer.json
  • Filesystem Path: components/Molecules/event-card-calendar/composer.json
  • Size: 307 Bytes
  • Content: 
    /* ---------------------------------------------- */
/*    Molekylen "Event card calendar"             */
/* ---------------------------------------------- */

// event-card-calendar - grundläggande inställningar
$EVENT-CARD-CALENDAR--ALIGN-ITEMS: flex-start;
$EVENT-CARD-CALENDAR--DISPLAY: flex;

// event-card-calendar - Small-modifier
$EVENT-CARD-CALENDAR--SMALL--ALIGN-ITEMS: center;
$EVENT-CARD-CALENDAR--SMALL--MARGIN-TOP: $space-5;

// date - grundläggande inställningar
$EVENT-CARD-CALENDAR__DATE--ALIGN-CONTENT: center;
$EVENT-CARD-CALENDAR__DATE--FLEX: 0 0 60px;
$EVENT-CARD-CALENDAR__DATE--HEIGHT: 60px;
$EVENT-CARD-CALENDAR__DATE--WIDTH: 60px;
$EVENT-CARD-CALENDAR__DATE--BACKGROUND-COLOR: $base2;
$EVENT-CARD-CALENDAR__DATE--TEXT-ALIGN: center;

// date - modifier "medium"
$EVENT-CARD-CALENDAR__DATE--MEDIUM--FLEX: 0 0 80px;
$EVENT-CARD-CALENDAR__DATE--MEDIUM--HEIGHT: 80px;
$EVENT-CARD-CALENDAR__DATE--MEDIUM--WIDTH: 80px;

// day - grundläggande inställningar
$EVENT-CARD-CALENDAR__DAY--MARGIN-TOP: $space-2;
$EVENT-CARD-CALENDAR__DAY--COLOR: $white;
$EVENT-CARD-CALENDAR__DAY--LINE-HEIGHT: $line-height--medium;

// day - medium
$EVENT-CARD-CALENDAR__DAY--MEDIUM--MARGIN-TOP: $space-3;

// day - large
$EVENT-CARD-CALENDAR__DAY--LARGE--MARGIN-TOP: $space-2; //em(10);

// month - grundläggande
$EVENT-CARD-CALENDAR__MONTH--COLOR: $white;
$EVENT-CARD-CALENDAR__MONTH--LINE-HEIGTH: $line-height--small; //1em;
$EVENT-CARD-CALENDAR__MONTH--FONT-WEIGHT: normal;

// description - grundläggande
$EVENT-CARD-CALENDAR__DESCRIPTION--MARGIN-LEFT: $space-5;

// title - grundläggande
$EVENT-CARD-CALENDAR__TITLE--LINE-HEIGHT: $line-height--large;

// text- grundläggande
$EVENT-CARD-CALENDAR--TEXT--PADDING-TOP: 1ex;

// link - grundläggande
$EVENT-CARD-CALENDAR__LINK--FONT-SIZE: inherit;
$EVENT-CARD-CALENDAR__LINK--TEXT-DECORATION: none;
$EVENT-CARD-CALENDAR__LINK--COLOR: inherit;
$EVENT-CARD-CALENDAR__LINK--CUROSR: pointer;

// link - Hover och active states
$EVENT-CARD-CALENDAR__LINK--HOVER--TEXT-DECORATION: underline;

// link - visited
$EVENT-CARD-CALENDAR__LINK--VISITED--COLOR: $link-visited;

// time - grundinställningar
$EVENT-CARD-CALENDAR__TIME--COLOR: $grey-darkest;
$EVENT-CARD-CALENDAR__TIME--BEFORE--FONT-FAMILY: $icon--font-family;
$EVENT-CARD-CALENDAR__TIME--BEFORE--CONTENT: "\e84d";

// time - small
$EVENT-CARD-CALENDAR__TIME--SMALL--MARGIN-BOTTOM: 0;
$EVENT-CARD-CALENDAR__TIME--SMALL--LINE-HEIGHT: 0.625em; //em(10);

// venue
$EVENT-CARD-CALENDAR__VENUE--COLOR: $grey-darkest;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--FONT-FAMILY: $icon--font-family;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--COLOR: $color-secondary;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--CONTENT: "\e83f";

// venue - small
$EVENT-CARD-CALENDAR__VENUE--SMALL--MARGIN-BOTTOM: 0;
$EVENT-CARD-CALENDAR__VENUE--SMALL--LINE-HEIGHT: 0.625em; //em(10);

// venue - sold out
$EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--COLOR: $warning;
$EVENT-CARD-CALENDAR__VENUE--BEFORE--SOLD-OUT--CONTENT: "\e8f6";
  • URL: /components/raw/event-card-calendar/event-card-calendar.settings.scss
  • Filesystem Path: components/Molecules/event-card-calendar/event-card-calendar.settings.scss
  • Size: 3 KB

Molekyeln “Event card calendar”

Versionshistorik

  • 1.0.0.20200203 Globala variabler används
  • 1.0.0.20200123 Justerat sökväg till label efter att atomen döpts om.
  • 1.0.0.20200117 Status “wip”
  • 1.0.0.20191210 Brytande ändringar - omimplementerad med ny namngivning och settingsfil.
  • 1.0.0.20191121 Flyttat till gitrepo

Notes

Komponenten fungerar bra på följande webbläsaren:

  • Internet Explorer 11
  • Microsoft Edge
  • Google Chrome
  • Mozila Firefox
  • Safari