Huesos
Style
Guide

Repositoire

GitHub

Preview

Images

Images are responsive by default.

The variable $figcaption-font-size defines the sizing of image captions, while the $figcaption-align variable sets a global alignment.

Since $figcaption-font-size will likely be a small size, it is forced to have a $base-line-multi value for the ritmo lines. This way, we ensure the same line-height is kept.

Keep the alignment

In order to align the whole block while keeping the text alignment of the figcaption defined on $figcaption-align, you need to wrap the entire <figure> on an html block element containing the .right, .left or .center class.

Example

<section>
    <h4>An image</h4>
    <img src="https://placeimg.com/300/300/nature" />
</section>

<section>
    <h4>A figure</h4>
    <figure>
        <img src="https://placeimg.com/400/200/nature" />
        <figcaption>Well documented code is always a bliss</figcaption>
    </figure>
</section>

<section class="center">
    <h4 class="m0">A centered figure</h4>
    <p>The figcaption keeps its own alignment!</p>
    <figure>
        <img src="https://placeimg.com/400/200/nature" />
        <figcaption>Well documented code is always a bliss</figcaption>
    </figure>
</section>

Assets

  • Filesystem Path: src/components/html/images/_images.scss
  • Size: 249 Bytes 
  • img {
	display:inline-block;
	border-style: none;
	max-width:100%;
	height:auto;
}

figure {
	display:inline-block;
}

figcaption {
	display:block;
	@include ritmo-font-size($figcaption-font-size, $base-line-multi);
	text-align: $figcaption-align;
}