Skip to content
PHIL
Français

Item

component

One entry of a list: its media, its title and description, its actions.

Preview

Light

  • Two-factor authentication

    A code from an application at each sign-in.

Code 
<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Dark

  • Two-factor authentication

    A code from an application at each sign-in.

Code 
<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Try it

Change the props; the example is rendered again by the server.

  • Two-factor authentication

    A code from an application at each sign-in.

<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Variants

variant

The visual style variant.

  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

variant="default"
  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

variant="outline"
  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

variant="muted"

size

The item size.

  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

size="default"
  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

size="sm"

as

The HTML tag to render; use a when the whole item navigates and li in an Item:Group.

    Two-factor authentication

    A code from an application at each sign-in.

    Two-factor authentication

    A code from an application at each sign-in.

as="div"
as="a"
  • Two-factor authentication

    A code from an application at each sign-in.

  • Two-factor authentication

    A code from an application at each sign-in.

as="li"

Installation

php bin/console ux:install item --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
variant 'default'|'outline'|'muted' 'default' The visual style variant.
size 'default'|'sm' 'default' The item size.
as 'div'|'a'|'li' 'div' The HTML tag to render; use a when the whole item navigates and li in an Item:Group.

Accessibility

An Item:Group is a list, its items li elements, so a screen reader says how many there are. The media is decorative and hidden from screen readers: write in the title what a picture would say. With as="a", the whole item is one link; then it holds no other link or button.

Files to copy

templates/components/Item.html.twig 
{%- props
    ## 'default'|'outline'|'muted' The visual style variant.
    variant = 'default',
    ## 'default'|'sm' The item size.
    size = 'default',
    ## 'div'|'a'|'li' The HTML tag to render; use `a` when the whole item navigates and `li` in an `Item:Group`.
    as = 'div'
-%}
{%- set _tag = as in ['div', 'a', 'li'] ? as : 'div' -%}
{%- set _variant = {outline: ' isOutline', muted: ' isMuted'}[variant] ?? '' -%}
<{{ _tag }} data-slot="item" data-variant="{{ variant }}" data-size="{{ size }}"{{ attributes.defaults({class: 'isItem' ~ _variant ~ (size is same as('sm') ? ' isSmall' : '')}) }}>
{##- The item, typically an `Item:Media`, an `Item:Content` and `Item:Actions`. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>
templates/components/Item/Actions.html.twig 
<div data-slot="item-actions"{{ attributes.defaults({class: 'isItemActions'}) }}>
{##- The buttons or links acting on the item. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Item/Content.html.twig 
<div data-slot="item-content"{{ attributes.defaults({class: 'isItemContent'}) }}>
{##- The title and the description of the item. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Item/Description.html.twig 
<p data-slot="item-description"{{ attributes.defaults({class: 'isItemDescription'}) }}>
{##- A line or two about the item. -#}
{%- block content %}{% endblock -%}
</p>
templates/components/Item/Footer.html.twig 
<div data-slot="item-footer"{{ attributes.defaults({class: 'isItemFooter'}) }}>
{##- A line below the item's media and content. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Item/Group.html.twig 
<ul role="list" data-slot="item-group"{{ attributes.defaults({class: 'isItemGroup'}) }}>
{##- The items of the list, each an `Item` with `as="li"`, separated or not by `Item:Separator`. -#}
{%- block content %}{% endblock -%}
</ul>
templates/components/Item/Header.html.twig 
<div data-slot="item-header"{{ attributes.defaults({class: 'isItemHeader'}) }}>
{##- A line above the item's media and content. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Item/Media.html.twig 
{%- props
    ## 'default'|'icon'|'image' What the media holds, which sets its box.
    variant = 'default'
-%}
<div data-slot="item-media" data-variant="{{ variant }}" aria-hidden="true"{{ attributes.defaults({class: 'isItemMedia' ~ ({icon: ' hasIcon', image: ' hasImage'}[variant] ?? '')}) }}>
{##- A decorative icon, an image or an avatar. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Item/Separator.html.twig 
<li role="none" data-slot="item-separator"{{ attributes.defaults({class: 'isItemSeparator'}) }}></li>
templates/components/Item/Title.html.twig 
<div data-slot="item-title"{{ attributes.defaults({class: 'isItemTitle'}) }}>
{##- The name of the item. -#}
{%- block content %}{% endblock -%}
</div>