Styleguide

Tiles 

<div class="tiles" data-scrollable="true">
    <div class="tiles-inner">
        <div class="row">
            <div class="col-6 col-sm-6 col-md-3 ">
                <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>
            <div class="col-6 col-sm-6 col-md-3 ">
                <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>
            <div class="col-6 col-sm-6 col-md-3 ">
                <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>
            <div class="col-6 col-sm-6 col-md-3 ">
                <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>
        </div>
    </div>
    <div class="scroll-indicator">
        <svg width="50" height="25" viewBox="0 0 50 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M34.2191 13.4201L26.4254 11.3226C26.2047 11.2637 26.0531 11.0813 26.0525 10.8738V2.29428C26.0525 1.25721 25.1197 0.416504 23.9691 0.416504C22.8186 0.416504 21.8858 1.25721 21.8858 2.29428V15.5589C21.8848 15.7635 21.7369 15.944 21.5201 16.005C21.3034 16.066 21.0678 15.9934 20.9379 15.8256C17.8337 11.8109 12.9066 13.1047 15.1858 16.2462L21.2441 24.4521C21.4372 24.7135 21.7624 24.8706 22.1108 24.8708H33.4316C33.9362 24.8717 34.3689 24.5465 34.4587 24.099C34.8754 22.0335 35.8421 17.1832 36.0733 16.2781C36.3955 15.0328 35.5813 13.7777 34.2191 13.4201Z" fill="#B4B4B4" />
            <path d="M49.6504 6.98914C50.1064 6.47396 50.1064 5.74296 49.6504 5.22779L45.4837 0.533343C45.0709 0.0626986 44.3717 -0.119196 43.7441 0.0807985C43.5652 0.136216 43.4002 0.22301 43.2587 0.336176C43.0497 0.501861 43.0222 0.786345 43.1962 0.982132L46.1795 4.34335C47.0925 5.37202 47.0925 6.83364 46.1795 7.86231L43.1962 11.2235C43.022 11.4199 43.0495 11.705 43.2587 11.8714C43.4013 11.9832 43.5659 12.0699 43.7441 12.1267C44.3696 12.3246 45.0655 12.1446 45.4795 11.678L49.6504 6.98914Z" fill="#F39100" />
            <path d="M3.80452 7.86202C2.89157 6.83335 2.89157 5.37173 3.80452 4.34306L6.78786 0.979963C6.96185 0.784176 6.93432 0.499691 6.72536 0.334007C6.58489 0.221936 6.42138 0.135807 6.24411 0.080507C5.61907 -0.11895 4.92247 0.0604425 4.50869 0.527418L0.342023 5.22186C-0.114008 5.73704 -0.114008 6.46804 0.342023 6.98322L4.50869 11.6777C4.80511 12.0111 5.25342 12.2052 5.72744 12.2053C6.09516 12.206 6.45086 12.0873 6.72952 11.8711C6.93914 11.7059 6.96758 11.4214 6.79411 11.2251L3.80452 7.86202Z" fill="#F39100" />
            <path d="M11.9733 1.40827C11.973 0.810644 11.5543 0.278262 10.9287 0.0801773C10.3031 -0.117908 9.60696 0.0614444 9.19204 0.527594L5.02537 5.22204C4.56934 5.73722 4.56934 6.46821 5.02537 6.98339L9.19204 11.6778C9.60696 12.144 10.3031 12.3233 10.9287 12.1253C11.5543 11.9272 11.973 11.3948 11.9733 10.7972V1.40827Z" fill="#F39100" />
            <path d="M44.9629 6.98875C45.419 6.47357 45.419 5.74257 44.9629 5.22739L40.7963 0.53295C40.3802 0.0691065 39.6854 -0.108632 39.061 0.089071C38.4366 0.286774 38.0178 0.817156 38.015 1.41363V10.8025C38.0153 11.4001 38.4341 11.9325 39.0596 12.1306C39.6852 12.3287 40.3813 12.1493 40.7963 11.6832L44.9629 6.98875Z" fill="#F39100" />
        </svg>

    </div>
</div>
 
<div class="tiles" data-scrollable="{{ scrollable }}">
    {% if scrollable == true %}
    <div class="tiles-inner">
    {% endif %}
        <div class="row">
            {% for item in items %}
                <div class="{{ col }} {{ sm_col }} {{ md_col }} {{ lg_col }}">
                {{ item }}
                </div>
            {% endfor %}
        </div>
    {% if scrollable == true %}
    </div>
    {% endif %}
    {% if scrollable == true %}
    <div class="scroll-indicator">
        <svg width="50" height="25" viewBox="0 0 50 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M34.2191 13.4201L26.4254 11.3226C26.2047 11.2637 26.0531 11.0813 26.0525 10.8738V2.29428C26.0525 1.25721 25.1197 0.416504 23.9691 0.416504C22.8186 0.416504 21.8858 1.25721 21.8858 2.29428V15.5589C21.8848 15.7635 21.7369 15.944 21.5201 16.005C21.3034 16.066 21.0678 15.9934 20.9379 15.8256C17.8337 11.8109 12.9066 13.1047 15.1858 16.2462L21.2441 24.4521C21.4372 24.7135 21.7624 24.8706 22.1108 24.8708H33.4316C33.9362 24.8717 34.3689 24.5465 34.4587 24.099C34.8754 22.0335 35.8421 17.1832 36.0733 16.2781C36.3955 15.0328 35.5813 13.7777 34.2191 13.4201Z" fill="#B4B4B4"/>
            <path d="M49.6504 6.98914C50.1064 6.47396 50.1064 5.74296 49.6504 5.22779L45.4837 0.533343C45.0709 0.0626986 44.3717 -0.119196 43.7441 0.0807985C43.5652 0.136216 43.4002 0.22301 43.2587 0.336176C43.0497 0.501861 43.0222 0.786345 43.1962 0.982132L46.1795 4.34335C47.0925 5.37202 47.0925 6.83364 46.1795 7.86231L43.1962 11.2235C43.022 11.4199 43.0495 11.705 43.2587 11.8714C43.4013 11.9832 43.5659 12.0699 43.7441 12.1267C44.3696 12.3246 45.0655 12.1446 45.4795 11.678L49.6504 6.98914Z" fill="#F39100"/>
            <path d="M3.80452 7.86202C2.89157 6.83335 2.89157 5.37173 3.80452 4.34306L6.78786 0.979963C6.96185 0.784176 6.93432 0.499691 6.72536 0.334007C6.58489 0.221936 6.42138 0.135807 6.24411 0.080507C5.61907 -0.11895 4.92247 0.0604425 4.50869 0.527418L0.342023 5.22186C-0.114008 5.73704 -0.114008 6.46804 0.342023 6.98322L4.50869 11.6777C4.80511 12.0111 5.25342 12.2052 5.72744 12.2053C6.09516 12.206 6.45086 12.0873 6.72952 11.8711C6.93914 11.7059 6.96758 11.4214 6.79411 11.2251L3.80452 7.86202Z" fill="#F39100"/>
            <path d="M11.9733 1.40827C11.973 0.810644 11.5543 0.278262 10.9287 0.0801773C10.3031 -0.117908 9.60696 0.0614444 9.19204 0.527594L5.02537 5.22204C4.56934 5.73722 4.56934 6.46821 5.02537 6.98339L9.19204 11.6778C9.60696 12.144 10.3031 12.3233 10.9287 12.1253C11.5543 11.9272 11.973 11.3948 11.9733 10.7972V1.40827Z" fill="#F39100"/>
            <path d="M44.9629 6.98875C45.419 6.47357 45.419 5.74257 44.9629 5.22739L40.7963 0.53295C40.3802 0.0691065 39.6854 -0.108632 39.061 0.089071C38.4366 0.286774 38.0178 0.817156 38.015 1.41363V10.8025C38.0153 11.4001 38.4341 11.9325 39.0596 12.1306C39.6852 12.3287 40.3813 12.1493 40.7963 11.6832L44.9629 6.98875Z" fill="#F39100"/>
        </svg> 

    </div>
    {% endif %}
</div>
 
{
  "col": "col-6",
  "sm_col": "col-sm-6",
  "md_col": "col-md-3",
  "lg_col": "",
  "scrollable": true,
  "items": [
    {
      "$tile--whitepaper": null,
      "title": "",
      "overlay_link": true
    },
    {
      "$tile--whitepaper": null,
      "title": "",
      "overlay_link": true
    },
    {
      "$tile--whitepaper": null,
      "title": "",
      "overlay_link": true
    },
    {
      "$tile--whitepaper": null,
      "title": "",
      "overlay_link": true
    }
  ]
}
  • Content: 
    .tiles {
	width: 100%;
	[class^="col-"] {
		margin-bottom: 3rem;
	}

	&[data-scrollable="true"] {
		margin-left: -3rem;
		margin-right: -3rem;
		width: calc(100% + 6rem);

		@include media-breakpoint-up(md) {
			margin-left: 0;
			margin-right: 0;
			width: 100%;
		}

		.tiles-inner {
			overflow: auto;
			-webkit-overflow-scrolling: touch;

			.row {
				flex-wrap: nowrap;
			}
			[class^="col-"] {
				margin-bottom: 1rem;
			}

			@include media-breakpoint-up(md) {
				overflow: hidden;
				.row {
					flex-wrap: wrap;
				}
				[class^="col-"] {
					margin-bottom: 3rem;
				}
			}
		}

		.scroll-indicator {
			display: block;
			text-align: center;
			padding: 2rem 0;

			@include media-breakpoint-up(md) {
				display: none;
			}
		}
	}
}
  • URL: /components/raw/tiles/tiles.scss
  • Filesystem Path: components/02-components/tiles/tiles/tiles.scss
  • Size: 753 Bytes

There are no notes for this item.