Skip to main content

Images

Some simple components to place those images without them becoming deformed, and of course it is responsive.

Default image​

...
<figure class="image">
  <img src="..." alt="..." />
</figure>

Rounded image​

...
<figure class="image is-rounded">
  <img src="..." alt="..." />
</figure>

Circle image​

This works perfect with square images.

...
<figure class="image is-circle">
  <img src="..." alt="..." />
</figure>

Example with figcaption​

...
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<figure class="image is-circle">
  <img src="..." alt="..." />
  <figcaption>...</figcaption>
</figure>

Example with float figcaption​

...
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<figure class="image float-caption">
  <img src="..." alt="..." />
  <figcaption>...</figcaption>
</figure>

Example with float figcaption​

...
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<figure class="image is-shadow">
  <img src="..." alt="..." />
</figure>