lotte css

Layout

Semantic Containers

Article Element

The article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

Examples of articles would be: a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Section Element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis.

Header and Footer

Header Element

The header element represents a container for introductory content or a set of navigational links. A header typically contains:

  • One or more heading elements
  • Logo or icon
  • Authorship information

Footer Element

The footer element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about:

  • The author of the section
  • Copyright data
  • Links to related documents
  • Contact information

Navigation

Figure and Details

Figure Element

Example figure
Fig.1 - The figure element with a figcaption
Details Element (Click to expand)

The details element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

A summary element provides a summary, caption, or legend for the details.

Divs and Generic Containers

Div Element

The div element is a generic container for flow content. It has no effect on the content or layout until styled using CSS.

Another Div

Divs can be nested and used to create complex layouts.

Card Pattern

Using divs with appropriate CSS styling, you can create common UI patterns like cards.