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

Contact info 

<div class="rh-contact-info">
    <div class="rh-contact-info__header">
        <h2 class="rh-heading-underlined">Kontakt</h2>
    </div>

    <div class="rh-contact-info__body">
        <p class="rh-contact-info__body-title">Vårdcentralen Getinge</p>

        <div>
            <p class="rh-contact-info__body-subject" id="997788">Telefonnummer:</p>
            <span class="icon-phone rh-contact-info__body-icon"></span>
            <a href="tel:031 - 383 04 20" class="rh-link--navigation rh-contact-info__body-link" aria-labelledby="997788">031 - 383 04 20</a>
        </div>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Telefontider:</p>
        <table class="rh-contact-info__body-content">
            <tr>
                <td>Mån</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Tis</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Ons</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Tors</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="16:00">16:00</time></td>
            </tr>
            <tr>
                <td>Fre</td>
                <td><time datetime="09:00">09:00</time> - <time datetime="14:30">14:30</time></td>
            </tr>
        </table>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Besöksadress:</p>
        <p>Doktorsgatan 4</p>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Öppettider:</p>
        <table class="rh-contact-info__body-content">
            <tr>
                <td class="rh-contact-info__body-date-cell">Mån</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Tis</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Ons</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Tors</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="18:00">18:00</time></td>
            </tr>
            <tr>
                <td>Fre</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
        </table>

        <div class="rh-contact-info-space-top">
            <a href="#" class="rh-link--navigation rh-contact-info__body-link">
                E-tjänster och mer information om Vårdcentralen Getinge på 1177.se
            </a>

            <span class="icon-chevron-right rh-contact-info__body-icon"></span>
        </div>
    </div>
</div>
 
<div class="rh-contact-info">
    <div class="rh-contact-info__header">
        <h2 class="rh-heading-underlined">Kontakt</h2>
    </div>

    <div class="rh-contact-info__body">
        <p class="rh-contact-info__body-title">Vårdcentralen Getinge</p>

        <div>
            <p class="rh-contact-info__body-subject" id="997788">Telefonnummer:</p>
            <span class="icon-phone rh-contact-info__body-icon"></span>
            <a href="tel:031 - 383 04 20" class="rh-link--navigation rh-contact-info__body-link" aria-labelledby="997788">031 - 383 04 20</a>
        </div>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Telefontider:</p>
        <table class="rh-contact-info__body-content">
            <tr>
                <td>Mån</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Tis</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Ons</td>
                <td><time datetime="07:30">07:30</time> - <time datetime="16:50">16:50</time></td>
            </tr>
            <tr>
                <td>Tors</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="16:00">16:00</time></td>
            </tr>
            <tr>
                <td>Fre</td>
                <td><time datetime="09:00">09:00</time> - <time datetime="14:30">14:30</time></td>
            </tr>
        </table>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Besöksadress:</p>
        <p>Doktorsgatan 4</p>

        <p class="rh-contact-info__body-subject rh-contact-info-space-top">Öppettider:</p>
        <table class="rh-contact-info__body-content">
            <tr>
                <td class="rh-contact-info__body-date-cell">Mån</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Tis</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Ons</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
            <tr>
                <td>Tors</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="18:00">18:00</time></td>
            </tr>
            <tr>
                <td>Fre</td>
                <td><time datetime="08:00">08:00</time> - <time datetime="17:00">17:00</time></td>
            </tr>
        </table>

        <div class="rh-contact-info-space-top">
            <a href="#" class="rh-link--navigation rh-contact-info__body-link">
                E-tjänster och mer information om Vårdcentralen Getinge på 1177.se
            </a>

            <span class="icon-chevron-right rh-contact-info__body-icon"></span>
        </div>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .rh-contact-info {

    //Prohibit iOS increase font-size automatic
    @include iOSNoIncreaseFontSize;

    &__header {
        &-title {
            line-height: $contact-info__header-title--line-height; //25px
            margin-bottom: $contact-info__header-title--margin-bottom;

            font-size: $contact-info__header-title--font-size; //18px
            font-weight: bold;

            @include large {
                font-size: $contact-info__header-title--large-font-size; //24px
            }
        }
    }

    &__body {
        /* Box-modell/beteende */
        padding: $contact-info__body--padding;

        /* Visuellt */
        background-color: $contact-info__body--background-color;

        &-icon {
            /* Typografi */
            font-family: $contact-info__body-icon--font-family;
            color: $contact-info__body-icon--color;
        }

        &-title {
            /* Typografi */
            font-size: $contact-info__body-title--font-size;
            font-weight: $contact-info__body-title--font-weight;

            @include large {
                font-size: $contact-info__body-title--font-size-large; //18px
            }
        }

        &-subject {
            font-weight: $contact-info__body-subject--font-weight;
        }

        tr>td:first-child {
            /* Box-modell/beteende */
            height: $contact-info__body-table-first-cell--height;
            width: $contact-info__body-table-first-cell--width;
        }
        td {
            vertical-align: $contact-info__body-table-text--vertical-align;
        }

        &-content {
            /* Typografi */
            font-size: $contact-info__body-content--font-size;

            @include large {
                font-size: $contact-info__body-content--font-size-large;
            }
        }

        &-link {
            /* Typografi */
            font-size: $contact-info__body-link--font-size;
            color: $contact-info__body-link--color;
            line-height: $contact-info__body-link--line-height;
            text-decoration: $contact-info__body-link--text-decoration;

            &:hover {
                text-decoration: none;
            }

            &:focus {
                background-color: $contact-info__body-link--focus--background-color;
                text-decoration: $contact-info__body-link--focus--text-decoration; //none;
                border-radius: $contact-info__body-link--focus--border-radius; //5px;
                padding: $contact-info__body-link--focus--padding; //.3ex;
                outline: $contact-info__body-link--focus--outline; //none;
                color: $contact-info__body-link--focus--color; //white;
            }

            @include large {
                font-size: $contact-info__body-link--font-size-large;
            }
        }
    }

    &-space-top {
        /* Box-modell/beteende */
        margin-top: $contact-info__space-top;
    }
}
  • URL: /components/raw/contact-info/_contact-info.scss
  • Filesystem Path: components/Molecules/contact-info/_contact-info.scss
  • Size: 3 KB
  • Content: 
    {
    "name": "regionhalland/contact-info",
    "description": "Contact info - kontaktkort",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/contact-info/composer.json
  • Filesystem Path: components/Molecules/contact-info/composer.json
  • Size: 307 Bytes
  • Content: 
    /* Molecule - Contact info */
// --- Base settings ---
$CONTACT-INFO--BACKGROUND-COLOR: $base3-light;
$CONTACT-INFO--TEXT-COLOR: $black;
$CONTACT-INFO--FOCUS-TEXT-COLOR: $white;
$CONTACT-INFO--FOCUS-BACKGROUND-COLOR: $black;
// --- End of settings ---

$contact-info__header-title--line-height: $line-height--xl;
$contact-info__header-title--font-size: $font-size--large; // 18px
$contact-info__header-title--large-font-size: $font-size--3xl; // 24px
$contact-info__header-title--margin-bottom: $space-1;

$contact-info__body--padding: 1.5625em 1em; //25px 16px
$contact-info__body--background-color: $CONTACT-INFO--BACKGROUND-COLOR;

$contact-info__body-icon--font-family: $icon--font-family;
$contact-info__body-icon--color: $CONTACT-INFO--TEXT-COLOR;

$contact-info__body-title--font-size: $font-size--standard; //16px
$contact-info__body-title--font-size-large: $font-size--large; //18px
$contact-info__body-title--font-weight: bold;

$contact-info__body-subject--font-weight: bold;

$contact-info__body-table-first-cell--height: 1.8em;
$contact-info__body-table-first-cell--width: 3em;
$contact-info__body-table-text--vertical-align: middle;

$contact-info__body-content--font-size: $font-size--xs; //15px
$contact-info__body-content--font-size-large: $font-size--standard; //16px

$contact-info__body-link--font-size: $font-size--xs; //15px
$contact-info__body-link--font-size-large: $font-size--standard; //16px
$contact-info__body-link--color: $CONTACT-INFO--TEXT-COLOR;
$contact-info__body-link--line-height: $line-height--2xl;
$contact-info__body-link--text-decoration: underline;

$contact-info__space-top: $space-8;

//Focus state
$contact-info__body-link--focus--background-color: $CONTACT-INFO--FOCUS-BACKGROUND-COLOR;
$contact-info__body-link--focus--text-decoration: none;
$contact-info__body-link--focus--border-radius: $border-radius--standard;
$contact-info__body-link--focus--padding: .3ex;
$contact-info__body-link--focus--outline: none;
$contact-info__body-link--focus--color: $CONTACT-INFO--FOCUS-TEXT-COLOR;
  • URL: /components/raw/contact-info/contact-info.settings.scss
  • Filesystem Path: components/Molecules/contact-info/contact-info.settings.scss
  • Size: 2 KB

Contact info

Versionhistorik

1.0.3

Globala variabler används

1.0.2

“Stable” status

1.0.1 (2019-12-17)

Använda inte längre @mixin.

1.0.0 första versionen