Styleguide

Card: Whitepaper 

<div class="tile">
    <div class="tile-svg">
        <img src="/images/whitepaper-dummy.svg">
    </div>
    <div class="tile-preline">preline goes here...</div>
    <div class="tile-text">normal text goes here lorem impsum dolor</div>
    <a href="#lorem" class="overlay-link"></a>
</div>
 
<div class="tile">
  {% if img_class %}
    <div class="tile-image tile-background-image {{ img_class }}"></div>
  {% else %}
    {% if image_svg == false %}
      <div class="tile-image lazy-bg" style="background-image: url({{ image_src }})"></div>
    {% endif %}
    {% if image_svg %}
      <div class="tile-svg">
        {{ image_svg }}
      </div>
    {% endif %}
  {% endif %}
  <div class="tile-preline">{{ preline }}</div>
  <div class="tile-text">{{ text }}</div>
  {% if overlay_link %}
    <a href="{{ href }}" class="overlay-link"></a>
  {% endif %}
</div>
 
{
  "title": "",
  "image_src": "https://picsum.photos/300/200",
  "preline": "preline goes here...",
  "text": "normal text goes here lorem impsum dolor",
  "href": "#lorem",
  "overlay_link": true,
  "image_svg": "<img src=\"/images/whitepaper-dummy.svg\">",
  "img_class": ""
}
  • Content: 
    .tile {
	position: relative;

	.tile-image {
		width: 100%;
		padding-bottom: 66.667%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		margin-bottom: $space-s;
	}

	.tile-svg {
		width: 100%;
		margin-bottom: $space-s;
		svg {
			width: 100%;
			height: auto;
		}
		img {
			width: 100%;
			height: auto;
		}
	}

	.tile-preline {
		@extend .label-title;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}
	.tile-text {
		@extend .text-medium;
		word-break: break-word;
	}

	.btn {
		height: 3.5rem;
	}

	.overlay-link {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background: transparent;
	}
}
  • URL: /components/raw/tile/tile.scss
  • Filesystem Path: components/02-components/tiles/tile/tile.scss
  • Size: 674 Bytes

There are no notes for this item.