4 unit-pict
The pict unit.
4.1 Core
The core module.
4.1.1 Default style
The default style.
default
<!-- with img element -->
<figure class="unit-pict">
<img class="unit-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="unit-pict">
<img class="unit-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="unit-pict">
<source media="(min-width: 668px)" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
<source media="(max-width: 667px)" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
<img class="unit-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="unit-pict">
<iframe class="unit-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen loading="auto"></iframe>
</figure>4.2 Align
The align module.
4.2.1 Modifiers
The align modifiers.
default
unit-pict--align-left
Left alignment
unit-pict--align-center
Center alignment
unit-pict--align-right
Right alignmentRight alignment
<!-- with img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="unit-pict {{modifier_class}}">
<source media="(min-width: 668px)" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
<source media="(max-width: 667px)" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
<img class="unit-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="unit-pict {{modifier_class}}">
<iframe class="unit-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen loading="auto"></iframe>
</figure>4.3 Aspect Ratio
The aspect ratio module.
4.3.1 Modifiers
The aspect ratio modifiers.
default
unit-pict--aspect-ratio-1-1
To 1:1
unit-pict--aspect-ratio-4-3
To 4:3
unit-pict--aspect-ratio-16-9
To 16:9
<!-- with img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="unit-pict {{modifier_class}}">
<source media="(min-width: 668px)" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
<source media="(max-width: 667px)" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
<img class="unit-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="unit-pict {{modifier_class}}">
<iframe class="unit-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen loading="auto"></iframe>
</figure>4.4 Copy protect
The copy protect module.
4.4.1 Modifiers
The copy protect modifiers.
default
unit-pict--copy-protect-true
Enable copy protection
<!-- with img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="unit-pict {{modifier_class}}">
<source media="(min-width: 668px)" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
<source media="(max-width: 667px)" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
<img class="unit-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="unit-pict {{modifier_class}}">
<iframe class="unit-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen loading="auto"></iframe>
</figure>4.5 Fit
The fit module.
4.5.1 Modifiers
The fit modifiers.
default
unit-pict--fit-width
Fit to width
unit-pict--fit-max-width
Fit to max-width
<!-- with img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="https://placehold.co/400x300.png" alt="" width="400" height="300" loading="auto" />
</figure>
<!-- with breaking img element -->
<figure class="unit-pict {{modifier_class}}">
<img class="unit-pict__src" src="#" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="400" height="300" loading="auto" />
</figure>
<!-- with picture element -->
<picture class="unit-pict {{modifier_class}}">
<source media="(min-width: 668px)" srcset="https://placehold.co/800x600.png 800w, https://placehold.co/400x300.png 400w" sizes="400px" />
<source media="(max-width: 667px)" srcset="https://placehold.co/600x600.png 600w, https://placehold.co/300x300.png 300w" sizes="300px" />
<img class="unit-pict__src" src="https://placehold.co/800x600.png" alt="" loading="auto" />
</picture>
<!-- with iframe player -->
<figure class="unit-pict {{modifier_class}}">
<iframe class="unit-pict__src" title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen loading="auto"></iframe>
</figure>