hkk Frontend 2017

Splash 

<div class="splash">
    <svg class="icon splash__icon icon--checkmark-outline" id="icon-4aa4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-outline"></use>
</svg>
    <h1 class="headline headline--display-1">Ahoi!
    </h1>
    <div class="splash__content">
        <div class="formatted-text">
            <p>Vielen Dank. Wir freuen uns, Sie bald als neuen Kunden an Bord der hkk begrüßen zu können!</p>
        </div>
    </div>
    <a class="icon-block" href="/templates/index.html">
        <svg class="icon icon-block__icon icon--internal-link" id="icon-e5fa" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Zur Startseite
    </a>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render splash screen
.splash&attributes(attr)
  //- Icon
  if icon
    != include('@icon', {icon: icon, attr: { class: 'splash__icon' }})
    
  //- Headline
  if headline
    != include('@headline', {text: headline})
    
  //- Content
  if content
    .splash__content
      != include('@formatted-text', {content: content})

  //- Link
  if link
    != include('@icon-block', link)
 
{
  "icon": "checkmark-outline",
  "headline": "Ahoi!",
  "content": "p Vielen Dank. Wir freuen uns, Sie bald als neuen Kunden an Bord der hkk begrüßen zu können!\n",
  "link": {
    "icon": "internal-link",
    "link": "/templates/index.html",
    "text": "Zur Startseite"
  }
}
  • Content: 
    $splash-icon-size: 8rem;

.splash {
  text-align: center;
  width: 100%;
}

.splash__icon {
  height: $splash-icon-size;
  margin-bottom: 4rem;
  width: $splash-icon-size;
}

.splash__content {
  margin: 3rem auto;
  max-width: 45rem;
}
  • URL: /components/raw/splash/splash.scss
  • Filesystem Path: src/components/organisms/splash/splash.scss
  • Size: 237 Bytes

There are no notes for this item.