Card

component

A card: its picture, a header, its content and a footer.

Preview

Light

Workshop

Saturday morning

Bring your dice.

Code

<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Workshop</twig:Card:Title>
        <twig:Card:Description>Saturday morning</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>Bring your dice.</twig:Card:Content>
    <twig:Card:Footer>Montreal</twig:Card:Footer>
</twig:Card>

Dark

Workshop

Saturday morning

Bring your dice.

Code

<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Workshop</twig:Card:Title>
        <twig:Card:Description>Saturday morning</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>Bring your dice.</twig:Card:Content>
    <twig:Card:Footer>Montreal</twig:Card:Footer>
</twig:Card>

Try it

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

Workshop

Saturday morning

Bring your dice.

<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Workshop</twig:Card:Title>
        <twig:Card:Description>Saturday morning</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>Bring your dice.</twig:Card:Content>
    <twig:Card:Footer>Montreal</twig:Card:Footer>
</twig:Card>

Variants

`size`

Size variant of the card.

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

size="default"

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

size="sm"

`as`

The HTML tag to render.

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

as="article"

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

as="section"

as="aside"

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

as="div"

Workshop

Saturday morning

Bring your dice.

Workshop

Saturday morning

Bring your dice.

as="li"

Installation

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

Props

Prop	Type	Default	Description
`size`	`'default'\|'sm'`	`'default'`	Size variant of the card.
`as`	`'article'\|'section'\|'aside'\|'div'\|'li'`	`'article'`	The HTML tag to render.

Files to copy

templates/components/Card.html.twig

{%- props
    ## 'default'|'sm' Size variant of the card.
    size = 'default',
    ## 'article'|'section'|'aside'|'div'|'li' The HTML tag to render.
    as = 'article'
-%}
{%- set _tag = as in ['article', 'section', 'aside', 'div', 'li'] ? as : 'article' -%}
<{{ _tag }} data-slot="card" data-size="{{ size }}"{{ attributes.defaults({class: 'isCard' ~ (size is same as('sm') ? ' isSmall' : '')}) }}>
{##- The card content, typically includes `Card:Header`, `Card:Content`, and/or `Card:Footer`. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>

templates/components/Card/Action.html.twig

<div data-slot="card-action"{{ attributes.defaults({class: 'isCardAction'}) }}>
{##- The action area placed at the end of the card header. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Card/Content.html.twig

<div data-slot="card-content"{{ attributes.defaults({class: 'isCardBody'}) }}>
{##- The main content area of the card. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Card/Description.html.twig

<p data-slot="card-description"{{ attributes.defaults({class: 'isCardDescription'}) }}>
{##- The descriptive text of the card. -#}
{%- block content %}{% endblock -%}
</p>

templates/components/Card/Footer.html.twig

<footer data-slot="card-footer"{{ attributes.defaults({class: 'isCardFooter'}) }}>
{##- The footer area, typically contains actions or additional information. -#}
{%- block content %}{% endblock -%}
</footer>

templates/components/Card/Header.html.twig

<header data-slot="card-header"{{ attributes.defaults({class: 'isCardHeader'}) }}>
{##- The header area, typically contains `Card:Title`, `Card:Description`, and `Card:Action`. -#}
{%- block content %}{% endblock -%}
</header>

templates/components/Card/Title.html.twig

{%- props
    ## int The level of the heading, kept between 1 and 6.
    level = 3
-%}
{%- set _level = max(1, min(6, level)) -%}
<h{{ _level }} data-slot="card-title"{{ attributes.defaults({class: 'isCardTitle'}) }}>
{##- The title text of the card. -#}
{%- block content %}{% endblock -%}
</h{{ _level }}>