Component | Square Image Container

styleKeyssquareImageContainer

Develop

<GridContainer>
  <Row>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=1" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=2" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=3" />
        </SquareImageContainer>
      </Box>
    </Column>
  </Row>
</GridContainer><GridContainer>
  <Row>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=1" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=2" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box backgroundColor="light-grey" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200?q=3" />
        </SquareImageContainer>
      </Box>
    </Column>
  </Row>
</GridContainer>

<SquareImageContainer>
  <FluidImage src="my-image.png" alt="My Alt Text" />
</SquareImageContainer>
<div class="square-image-container">
  <div class="square-image-container-inner">
    <img src="my-image.png" alt="My Alt Text" class="fluid-image" />
  </div>
</div>

SquareImageContainer

SquareImageContainer has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Square Image Container should only use Fluid Images and not Responsive Images.

Square Image Container

Components

SquareImageContainer

Guidelines