LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Icon-l

    ...

    The Icon's purpose, is to add an icon in your text.

    You can define the icon size thanks to the scale attribute which is based on the harmonic values.

    You can also define the gap between the text and the icon thanks to the gap attribute.

    • scale : the justify-content value.
    • gap : the align-items value.
    • gap-dir : the space between the elements.

    Examples:

    In this example, we add an icon to the text, and we define its scale.

    Hey this is LayoutCSS!

    Let's add a gap between the text and the icon, and define the gap direction.

    Hey this is LayoutCSS!