HIDA - Helmholtz Information and Data Science Academy

Placeholder 

<!-- Placeholder -->
<div class="placeholder placeholder--default">Placeholder</div>


<!-- Placeholder gray -->
<div class="placeholder placeholder--gray">Placeholder</div>


<!-- Platzhalter dark -->
<div class="placeholder placeholder--dark">Placeholder</div>


<!-- Placeholder flat -->
<div class="placeholder placeholder--flat">Placeholder</div>


//- Render placeholder
.placeholder(
  class=classNames(
    `placeholder--${variant || 'default'}`
  )
)&attributes(attr) #{text}
 
/* Placeholder */
{
  "text": "Placeholder"
}


/* Placeholder gray */
{
  "text": "Placeholder",
  "variant": "gray"
}


/* Platzhalter dark */
{
  "text": "Placeholder",
  "variant": "dark"
}


/* Placeholder flat */
{
  "text": "Placeholder",
  "variant": "flat"
}
  • Content: 
    .placeholder {
  border: 1px dashed $color-gray;
  padding: 20% 0;
  text-align: center;
}

.placeholder--flat {
  padding: 10% 0;
}

.placeholder--dark {
  background: $color-dark;
  border: 0;
  color: #fff;
}

.placeholder--gray {
  background: $color-gray;
  border: 0;
}
  • URL: /components/raw/placeholder/placeholder.scss
  • Filesystem Path: src/components/atoms/placeholder/placeholder.scss
  • Size: 277 Bytes

There are no notes for this item.