redesign.html

---
title: Redesign
description: Redesign för Digidem Lab's webbplats.
ref: redesign
image: "/uploads/medialab2.jpg"
ingress-text: En komplett styleguide för Digidem Lab's webbplats med typografi, färger, knappar, komponenter och layout-struktur.
layout: default
---
<style>
  body {
    background: #efefef;
    overflow: hidden;
  }
  h2.styleguide {
      margin: 8rem 0 4rem !important;
      border-bottom: 3px solid #000;
  }
  h3.styleguide {
    margin: 4rem 0 2rem !important;
    border-bottom: 1px solid #000;
  }
  .styleguide.element {
    padding: 2rem;
    margin: 2rem 0;
    background: white;

  }

</style>



<div class="section">
  <div class="container">
    <h1 class="title styleguide is-1">Redesign</h1>
  </div>
</div>

<section class="hero is-medium is-primary">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <nav class="navbar navbar-top">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="/">
            <svg id="logo" data-name="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.99 75.5" alt="Digidem Lab" width="308" height="78px"><path d="M256.33,40.16a4.05,4.05,0,0,0-2.54-.58v12a4,4,0,0,0,2.54-.59c1-.69,1.7-2.22,1.7-5.41S257.29,40.85,256.33,40.16Z"/><path d="M125.17,26.06c-.58-1.86-1.69-2.07-3.65-2.07V51.51c2,0,3.07-.21,3.65-2.12a17,17,0,0,0,.54-4.13c.05-1.86.05-4.35.05-7.54s0-5.67-.05-7.53A17.83,17.83,0,0,0,125.17,26.06Z"/><polygon points="232.42 29.93 232.1 29.93 231.94 30.94 230.3 43.24 234.22 43.24 232.58 30.94 232.42 29.93"/><path d="M0,0V75.5H300V0ZM50.72,53.21c-1.54,3-4.4,4-9.71,4H36.5v-39H41c5.31,0,8.17,1.06,9.71,4s1.7,7.85,1.7,15.49S52.2,50.24,50.72,53.21Zm16.54,4H61.53v-39h5.73Zm24.45-25H86v-6a3.53,3.53,0,0,0-.74-2.44,1.63,1.63,0,0,0-1.17-.43,1.77,1.77,0,0,0-1.69,1.44,4,4,0,0,0-.21,1.43v23a4.11,4.11,0,0,0,.21,1.44,1.77,1.77,0,0,0,1.69,1.43,1.63,1.63,0,0,0,1.17-.43A3.53,3.53,0,0,0,86,49.23V42.66H84.43V37.83h7.28v11.4a10.57,10.57,0,0,1-.95,4.19,7.52,7.52,0,0,1-2.28,2.92,7.12,7.12,0,0,1-4.41,1.33,7.27,7.27,0,0,1-4.45-1.33,7.38,7.38,0,0,1-2.23-2.92,10.57,10.57,0,0,1-1-4.19v-23a10.57,10.57,0,0,1,1-4.19,6.71,6.71,0,0,1,6.68-4.24,7.19,7.19,0,0,1,4.41,1.32,7.52,7.52,0,0,1,2.28,2.92,10.57,10.57,0,0,1,.95,4.19Zm14.89,25h-5.73v-39h5.73Zm23.4-4c-1.54,3-4.4,4-9.7,4h-4.51v-39h4.51c5.3,0,8.16,1.06,9.7,4s1.7,7.85,1.7,15.49S131.49,50.24,130,53.21Zm23.92-29.06h-7.37V34.38h5.3v6.26h-5.3V51.36h7.37v5.88h-13.1v-39h13.1Zm30.6,33.09h-5.31V31.1h-.32l-.21,1.64L175,57.24h-2.44l-3.66-24.5-.21-1.64h-.32V57.24h-5.3v-39h7l3.39,17.82.27,2.07h.11l.26-2.07,3.4-17.82h7Zm31.78,0H203v-39h5.72V51.94h7.59Zm19.78,0-1.06-8H229.5l-1.06,8h-5.57l5.89-39h7l5.89,39Zm26-3.5c-1.32,2-3.6,3.34-7,3.5h-7.05v-39h5c3.39,0,6,.64,7.79,2.28s2.65,4.19,2.65,8.06a10.34,10.34,0,0,1-.74,4.51A11.1,11.1,0,0,1,260,36.66c1.43.8,2.49,2.28,3.34,4.78a14.66,14.66,0,0,1,.64,4.77A13.53,13.53,0,0,1,262.11,53.74Z"/><path d="M256.33,24.52a4.34,4.34,0,0,0-2.54-.58V34.33a4.42,4.42,0,0,0,2.54-.58c1-.64,1.7-1.91,1.7-4.62S257.29,25.16,256.33,24.52Z"/><path d="M45.89,26.06C45.31,24.2,44.19,24,42.23,24V51.51c2,0,3.08-.21,3.66-2.12a16.65,16.65,0,0,0,.53-4.13c0-1.86,0-4.35,0-7.54s0-5.67,0-7.53A17.39,17.39,0,0,0,45.89,26.06Z"/></svg>
          </a>
          <span class="navbar-burger burger" data-target="navbar-menu">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
    </nav>
    <nav class="navbar navbar-main" id="overlay">
      <div class="container">
        <div class="navbar-menu" id="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item is-active" href="/services/">Tjänster</a>
            <a class="navbar-item" href="/education/">Utbildning</a>
            <a class="navbar-item" href="/about/">Om oss</a>
          </div>
          <div class="navbar-end">
            <a class="navbar-item" href="/work/">Uppdrag</a>
            <a class="navbar-item" href="/contact/">Kontakt</a>
            <a class="navbar-item is-uppercase item-lang-1" href="/services/">en</a>
            <span class="navbar-item item-lang-space">|</span>
            <a class="navbar-item is-uppercase item-lang-2 is-active" href="/tjanster/">sv</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
  
  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-6 is-size-4-tablet is-size-1-widescreen is-spaced">Tjänster</h1>
      <p class="subtitle is-3 is-hidden-touch is-hidden-desktop-only">Det här är en hook. Beskriv kort vilket problem målgruppen kämpar med. Som ni kan lösa. Visa att ni förstår dem.</p>
      <div class="buttons is-centered">
        <a class="button is-dark is-medium" href="/contact/">Kontakta oss</a>
      </div>
    </div>
  </div>
</section>

<hr>

<div class="section">
  <div class="container">
    <h2 class="title styleguide is-2" id="komponenter">Komponenter</h2>

    <h3 class="title styleguide is-4" id="rubrik-ingress">Rubrik med ingress</h3>
    <p>Sidhuvudet med titel och ingress som används på alla sidor. Se toppen av denna sida för exempel.</p>

    <div class="styleguide element">
      <div class="columns columns-header has-text-centered">
        <div class="column is-10-fullhd is-offset-1-fullhd">
          <h1 class="title is-5 is-size-4-tablet is-size-3-desktop is-size-1-widescreen is-spaced">Exempel på sidrubrik</h1>
          <p class="subtitle is-6 is-size-3-widescreen">Detta är en exempel på en ingress som används på alla sidor. Den har större textstorlek för att introducera sidans innehåll.</p>
        </div>
      </div>
    </div>


  </div>
</div>