Explicit locations

Control location of a element in more detail by using combination of the format {x}:{y} that won't spread across the element.

  • x - {left | center | right}
  • y - {top | center | bottom}
Joanna Kosinska
Top left
Top center
Top right
Center left
Center
Center right
Bottom left
Bottom center
Bottom right
Markup

Toggle example guides Toggle HTML markup 

<div pam-Grid>
    <div pam-Unit="2-3">
        <img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
        <div pam-position="absolute top:left" pam-overlay="light" pam-flex="center">Top left</div>
        <div pam-position="absolute top:center" pam-overlay="light" pam-flex="middle">Top center</div>
        <div pam-position="absolute top:right" pam-overlay="light" pam-flex="middle">Top right</div>
        <div pam-position="absolute center:left" pam-overlay="light" pam-flex="middle">Center left</div>
        <div pam-position="absolute center" pam-overlay="light" pam-flex="middle">Center</div>
        <div pam-position="absolute center:right" pam-overlay="light" pam-flex="center">Center right</div>
        <div pam-position="absolute bottom:left" pam-overlay="light" pam-flex="middle">Bottom left</div>
        <div pam-position="absolute bottom:center" pam-overlay="light" pam-flex="middle">Bottom center</div>
        <div pam-position="absolute bottom:right" pam-overlay="light" pam-flex="middle">Bottom right</div>
    </div>
</div>