Layouts

Object Position

Utilities for sets the alignment of the selected replaced element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
object-top	object-position: top
object-bottom	object-position: bottom
object-center	object-position: center
object-left	object-position: left
object-left-bottom	object-position: left bottom
object-left-top	object-position: left top
object-right	object-position: right
object-right-bottom	object-position: right bottom
object-right-top	object-position: right top

Usage

Original

object-top

object-left

object-left-bottom

object-left-top

object-right

object-right-bottom

object-right-top

<img class="object-top ... object-none ... width-24 height-24" src="...">

HTML

img {
  @extend
    .object-top,
    .object-none,
    .width-24,
    .height-24;
}

SCSS