Xidipity

Knowledge Base

display
Framework: Display
Xidipity WordPress Theme Knowledge Base Framework Content Header Image
block

Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width.

 
  • class: dsp:blk
  • css: display: block;
 

 

contents

Makes the container disappear, making the child elements children of the element the next level up in the DOM.

 
  • class: dsp:ct
  • css: display: contents;

 

flex

Displays an element as a block-level flex container.

 
  • class: dsp:fx
  • css: display: flex;
  •   display: -webkit-flex;

 

flexbox

Displays an element as a block-level flexbox container.

 
  • class: dsp:fxbx
  • css: display: flexbox;
  •   display: -ms-flexbox;

 

flow root

The element generates a block container box, and lays out its contents using flow layout.

 
  • class: dsp:flw-rt
  • css: display: flow-root;

 

grid

Displays an element as a block-level grid container.

 
  • class: dsp:grd
  • css: display: grid;
  •   display: -moz-grid;
  •   display: -ms-grid;

 

inline

Displays an element as an inline element (like <span>). Any height and width properties will have no effect.

 
  • class: dsp:inln
  • css: display: inline;

 

inline block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.

 
  • class: dsp:inln-blk
  • css: display: inline-block;

 

inline-flex

Displays an element as an inline-level flex container.

 
  • class: dsp:inln-fx
  • css: display: inline-flex;
  •   display: -webkit-inline-flex;

 

inline-flexbox

Displays an element as an inline-level flex container.

 
  • class: dsp:inln-fxbx
  • css: display: inline-flexbox;
  •   display: -ms-inline-flexbox;

 

inline-grid

Displays an element as an inline-level grid container.

 
  • class: dsp:inln-grd
  • css: display: inline-grid;
  •   display: -moz-inline-grid;
  •   display: -ms-inline-grid;

 

inline-table

The element is displayed as an inline-level table.

 
  • class: dsp:inln-tbl
  • css: display: inline-table;

 

list-item

Let the element behave like a <li> element.

 
  • class: dsp:lst-itm
  • css: display: list-item;

 

none

The element is completely removed.

 
  • class: dsp:none
  • css: display: none;

 

table

Let the element behave like a <table> element.

 
  • class: dsp:tbl
  • css: display: table;

 

table caption

Let the element behave like a <caption> element.

 
  • class: dsp:tbl-cap
  • css: display: table-caption;

 

table cell

Let the element behave like a <td> element.

 
  • class: dsp:tbl-cell
  • css: display: table-cell;

 

table column

Let the element behave like a <col> element.

 
  • class: dsp:tbl-col
  • css: display: table-column;

 

table column group

Let the element behave like a <colgroup> element.

 
  • class: dsp:tbl-col-grp
  • css: display: table-column-group;

 

table footer group

Let the element behave like a <tfoot> element.

 
  • class: dsp:tbl-ftr-grp
  • css: display: table-footer-group;

 

table header group

Let the element behave like a <thead> element.

 
  • class: dsp:tbl-hdr-grp
  • css: display: table-header-group;

 

table row

Let the element behave like a <tr> element.

 
  • class: dsp:tbl-row
  • css: display: table-row;

 

table row group

Let the element behave like a <tbody> element.

 
  • class: dsp:tbl-row-grp
  • css: display: table-row-group;

 

hidden

The content is invisible but still occupies the space on the page.

 
  • class: dsp:hidden
  • css: visibility: hidden;

 

Abbreviations
 
AbbreviationDefinition
dspdisplay
tbltable
blkblock
capcaption
colcolumn
flwflow
ftrfooter
fxflex
fxbxflexbox
grpgroup
hdrheader
inlninline
itmitem
lstlist
rtroot

 

Supported media
 
AbbreviationDefinition
all
sm)small
md)medium
lg)large
xl)extra large
Notes
 

All display classes begin with “dsp” and are separated by a colon from it’s value. See the flexbox framework for display options.


  • Updated: 1.1.0
  • Since: v1.0.0

 

September 25, 2022