Clone on GitHub
chevron_forward

Display

First Published On:
April 25, 2024
Last Updated:
July 21, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Class Name CSS Properties Description
.display__block
display: block;
Displays the element as a block-level element.
.display__flex-h
display: flex;
Displays the element as a flex container with a horizontal layout.
.display__flex-v
display: flex;
flex-direction: column;
Displays the element as a flex container with a vertical layout.
.display__grid
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
Displays the element as a grid container with a 2x2 layout.
.display__inlineBlock
display: inline-block;
Displays the element as an inline-level block container.
.display__none
display: none;
Hides the element from the layout.

Recommended Usage

Customization

Resources that mention this topic

No items found.
info

Get Help from a LiftKit Expert

arrow_forward
Book Quick Chat

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email info@chainlift.io directly for assistance.
.display__block {
  display: block;
}

.display__flex-h {
  display: flex;
}

.display__flex-v {
  display: flex;
  flex-direction: column;
}

.display__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
}

.display__inlineBlock{
  display: inline-block;
}

.display__none {
  display: none;
}
content_copy
code snippets will appear here