Tiles

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

To use a Bulma Tile component in your application, you need to import the BulmaTileModule by adding the following lines to your app.module.ts file.

import { BulmaTileModule } from '@ngx-builders/ngx-bulma/tile';

@NgModule({
  imports: [BulmaTileModule],
  // ...
})
export class AppModule {}

Basic

To display the Tile component in your Angular application, use the buTile directive with the <div> or <article> tag.

Directive	Description
`buTile`	For displaying an HTML element as Bulma tile

Properties	Description
`theme`	Set the theme of the Tile
`horizontalSize`	Set the horizontal size of the Tile. It accepts values from 1 to 12
`direction`	Set the direction of the Tile

Modifiers

The tile element has 16 modifiers:

3 contextual modifiers
- ancestor
- parent
- child

To use the contextual modifiers for the buTile directive, pass the modifier name to the directive. e.g. buTile="ancestor"

1 directional modifier
- vertical

To use the directional modifiers for the buTile directive, pass the modifier name to the direction property. e.g. direction="vertical"

12 horizontal size modifiers
- from 1
- to 12

To use the horizontal size modifiers for the buTile directive, pass the modifier value to the horizontalSize property. e.g. horizontalSize="8"

Example

Vertical...

Top tile

...tiles

Bottom tile

Middle tile

With an image

Wide tile

Aligned with the right tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall tile

With even more content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

<div buTile="ancestor">
  <div buTile direction="vertical" horizontalSize="8">
    <div buTile>
      <div buTile="parent" direction="vertical">
        <article buTile="child" theme="primary" class="notification">
          <p class="title">Vertical...</p>
          <p class="subtitle">Top tile</p>
        </article>
        <article buTile="child" theme="warning" class="notification">
          <p class="title">...tiles</p>
          <p class="subtitle">Bottom tile</p>
        </article>
      </div>
      <div buTile="parent">
        <article buTile="child" theme="info" class="notification">
          <p class="title">Middle tile</p>
          <p class="subtitle">With an image</p>
          <figure class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/640x480.png">
          </figure>
        </article>
      </div>
    </div>
    <div buTile="parent">
      <article buTile="child" theme="danger" class="notification">
        <p class="title">Wide tile</p>
        <p class="subtitle">Aligned with the right tile</p>
        <div class="content">
           <!-- Content -->
        </div>
      </article>
    </div>
  </div>
  <div buTile="parent">
    <article buTile="child" theme="success" class="notification">
      <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>
</div>

3 columns

Hello World

What is up?

Foo

Bar

Third column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

Side column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Main column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

<div buTile="ancestor">
  <div buTile="parent">
    <article buTile="child" class="box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div buTile="parent">
    <article buTile="child" class="box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
  <div buTile="parent">
    <article buTile="child" class="box">
      <p class="title">Third column</p>
      <p class="subtitle">With some content</p>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
          vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
      </div>
    </article>
  </div>
</div>

<div buTile="ancestor">
  <div buTile direction="vertical" horizontalSize="8">
    <div buTile>
      <div buTile="parent" direction="vertical">
        <article buTile="child" class="box">
          <p class="title">Vertical tiles</p>
          <p class="subtitle">Top box</p>
        </article>
        <article buTile="child" class="box">
          <p class="title">Vertical tiles</p>
          <p class="subtitle">Bottom box</p>
        </article>
      </div>
      <div buTile="parent">
        <article buTile="child" class="box">
          <p class="title">Middle box</p>
          <p class="subtitle">With an image</p>
          <figure class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/640x480.png">
          </figure>
        </article>
      </div>
    </div>
    <div buTile="parent">
      <article buTile="child" class="box">
        <p class="title">Wide column</p>
        <p class="subtitle">Aligned with the right column</p>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
            vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
        </div>
      </article>
    </div>
  </div>
  <div buTile="parent">
    <article buTile="child" class="box">
      <div class="content">
        <p class="title">Tall column</p>
        <p class="subtitle">With even more content</p>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar
            felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit
            amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque
            interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.
            Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus
            dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat
            libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta.
            Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
        </div>
      </div>
    </article>
  </div>
</div>

<div buTile="ancestor">
  <div buTile="parent">
    <article buTile="child" class="box">
      <p class="title">Side column</p>
      <p class="subtitle">With some content</p>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
          vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
      </div>
    </article>
  </div>
  <div buTile="parent" horizontalSize="8">
    <article buTile="child" class="box">
      <p class="title">Main column</p>
      <p class="subtitle">With some content</p>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
          vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
      </div>
    </article>
  </div>
</div>