Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

list Custom Classes

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

list Custom Classes

You can add a class to the Additional CSS Class field to display a special presentation on your blog.

List Block

theme default

ordered list

  1. hello world
  2. hello world
  3. hello world
    1. hello world
      1. hello world

unordered list

  • hello world
  • hello world
  • hello world
    • hello world
      • hello world

Additional CSS Classes

You can customize the list icon by adding the class name to Additional CSS Class.

list-style-none

Remove list icon

hide list icon

  • hello world
  • hello world
  • hello world

list-style-initial

display browser default icon

reset list icon

  1. hello world
  2. hello world
  3. hello world

circle

In the numbered list, change the icon to a circle.

  1. hello world
  2. hello world
  3. hello world

icon-alert

Change icon color
Five icon colors are available.

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-info

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-notice

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-cool

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-dark

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

list-style-tab

If you add a class name to a nested list, it will be displayed like a tab on the front end.

Requires a nested list and a custom class
  • hello tab 1
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  • tab 2
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Additional CSS Class: list-style-inline

When settings are made in the list block

Display when numbered list start number is specified in list block

OL has start attribute

  1. hello world
  2. hello world
  3. hello world

Display when reverse order is specified in numbered list

OL has reversed attribute

  1. hello world
  2. hello world
  3. hello world

Site proudly powered by WordPress