bulma/docs/cyp/grid/tiles.html

74 lines
1.9 KiB
HTML
Raw Permalink Normal View History

2022-05-07 21:38:56 +00:00
---
layout: cypress
title: Grid/Tiles
---
{% capture content %}
<div id="tile-vertical" class="tile is-vertical is-8">
<div id="tile" class="tile">
<div id="tile-parent" class="tile is-parent is-vertical">
<article id="tile-vertical-child" class="tile is-child notification is-warning">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article id="tile-child" class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
{% endcapture %}
<div id="tile-ancestor" class="tile is-ancestor">
{{ content }}
</div>
<div>
<div id="tile-ancestor-last" class="tile is-ancestor">
{{ content }}
</div>
</div>
<div class="tile is-ancestor" style="width: 1000px;">
{% for i in (1..12) %}
<div id="tile-{{ i }}" class="tile is-{{ i }}">
Tile {{ i }}
</div>
{% endfor %}
</div>