List

Two unrelated list helpers under one feature flag. .list-unstyled drops bullets and the default inline padding. .list-inline lays direct <li> children out inline with a gap; the .list-inline-item class is also emitted standalone for use outside a .list-inline parent.

Live

.list-unstyled drops bullets and indent

  • First item
  • Second item
  • Third item
<ul class="list-unstyled" style="margin: 0;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-list')
);
Playground

.list-inline lays items inline with a 0.5rem gap

  • Home
  • Docs
  • Reference
  • Tutorials
<ul class="list-inline" style="margin: 0;">
<li>Home</li>
<li>Docs</li>
<li>Reference</li>
<li>Tutorials</li>
</ul>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-list')
);
Playground

Standalone .list-inline-item inside a non-list carrier

tag-a tag-b tag-c 
<div>
<span class="list-inline-item">tag-a</span>
<span class="list-inline-item">tag-b</span>
<span class="list-inline-item">tag-c</span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-list')
);
Playground

Markup

markup
<!-- Strip bullets and inline padding. -->
<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Lay items out inline. Direct <li> children are styled automatically; the
     .list-inline-item class is available for use outside a .list-inline. -->
<ul class="list-inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Standalone .list-inline-item, useful inside non-list carriers. -->
<div>
  <span class="list-inline-item">Tag A</span>
  <span class="list-inline-item">Tag B</span>
</div>

Variables

VariableDefaultNotes
$unstyled-selector'.list-unstyled'Drops list-style and padding-inline-start.
$inline-selector'.list-inline'Same bullet/indent reset; direct <li> children become inline-block.
$inline-item-selector'.list-inline-item'Standalone class for inline items outside a .list-inline parent.
$inline-item-gap0.5remEmitted as margin-inline-end on each inline item.

Override example

app.scss
@use '@adnap/krysalicss/typography/list' with (
  $inline-item-gap: 1rem,
  $unstyled-selector: '.l-unstyled',
  $inline-selector: '.l-inline',
);

Tokens consumed

None — this module has no runtime --kc-* tokens. All values are compiled from the SCSS variables above.