Info Block

A component containing heading, text, and image. HTML follows document structure priority order while CSS allows flexible positioning for PC/mobile layouts.

Last updated:

Overview

Layouts containing heading, text, and image are frequently used patterns in blog articles and landing pages.

When arranging elements in order of importance for document structure, the sequence “heading → text → image” is generally considered optimal. This makes information easier to understand for users of assistive technologies such as screen readers.

This component demonstrates how to write HTML in logical order while using CSS Grid’s grid-area to freely control visual layout.

Preview

Responsive Layout Implementation

In modern web development, responsive design that adapts to various device sizes is essential.

This component uses container queries to automatically change layout based on container width. It displays vertically in narrow areas and horizontally in wider areas.

Abstract image

HTML

<div class="infoBlock">
  <div class="infoBlock__inner">
    <h2 class="infoBlock__heading">Heading Text</h2>
    <div class="infoBlock__text">
      <p>Description text goes here. Can contain multiple paragraphs.</p>
      <p>Additional paragraphs are also supported.</p>
    </div>
    <div class="infoBlock__image">
      <img src="/images/demos/dummy-image.svg" alt="Abstract image" />
    </div>
  </div>
</div>

CSS

※Uses CSS Grid, Container Query, and CSS Nesting.

.infoBlock {
  container: infoBlock / inline-size;
  inline-size: 100%;
}

.infoBlock__inner {
  --_gap: 1.5rem;

  display: grid;
  gap: var(--_gap);
  grid-template:
    "heading"
    "image"
    "text"/
    1fr;

  @container infoBlock (min-width: 480px) {
    grid-template:
      "heading heading"
      "text image"/
      1fr 40%;
  }
}

.infoBlock__heading {
  grid-area: heading;
  margin-block-end: 0.5em;
}

.infoBlock__text {
  grid-area: text;

  p {
    margin-block-end: 1em;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.infoBlock__image {
  grid-area: image;

  img {
    inline-size: 100%;
    block-size: auto;
  }
}

Features

  • Accessible Structure: HTML arranged in document structure priority order (heading → text → image) to support assistive technologies like screen readers
  • Flexible Layout: Uses CSS Grid’s grid-area to freely control visual positioning without changing HTML order
  • Container Query Support: Automatically switches to horizontal layout when parent element width exceeds 480px