Example card component: Event Small

Ready

HTML
View
Context
Assets
Info
Notes


        
        <article class="rtds-card rtds-card--event rtds-card--event-small is-card-fullclickable rtds-group/card">

    <picture class="rtds-card__image-wrapper
  ">
        <img class="rtds-card__image" alt="" src="../../images/card-image.jpg" />
    </picture>

    <div class="rtds-card__content">

        <div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">

            <div class="rtds-card__heading">

                <h3 class="rtds-card__title">
                    <a class="group-hover/card:rtds-underline" href="">

                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                    </a>
                </h3>

            </div>

            <small class="rtds-card__address">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#solid--map-pin" />
                </svg>
                <span class="rtds-sr-only">Luogo:</span> Via tal dei Tali, Pisa
            </small>

            <div class="rtds-card__categories">
                <a href="#" class="rtds-category rtds-category--sm">
                    Categoria
                </a>
            </div>

        </div>

        <div class="rtds-card__date">
            <time datetime="2024-06-25/2024-06-30"><span class="rtds-content-01 rtds-text-2xl rtds-italic rtds-font-extrabold">25-30/06</span> <span class="rtds-text-base">2023</span></time>
        </div>

    </div>

</article>


        {% extends "@card" %}
{% block classes %}{{ super() }} rtds-card--event rtds-card--event-small{% endblock classes %}
{% block contentWrapperStart %}
<div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">
{% endblock contentWrapperStart %}
{% block contentWrapperEnd %}
</div>
{% endblock contentWrapperEnd %}

{% block metadatas %}
{% endblock metadatas %}

{% block content %}
{% endblock content %}

{% block place %}
    <small class="rtds-card__address">
        {% render '@icon', {id: 'solid--map-pin', size: 'rtds-w-4 rtds-h-4'}, true %}<span class="rtds-sr-only">Luogo:</span> Via tal dei Tali, Pisa
    </small>
{% endblock place %}

{% block additionalContent %}
    {% block date %}
    {% if date %}
    <div class="rtds-card__date">
        <time datetime="2024-06-25/2024-06-30"><span class="rtds-content-01 rtds-text-2xl rtds-italic rtds-font-extrabold">25-30/06</span> <span class="rtds-text-base">2023</span></time>
    </div>
    {% endif %}
    {% endblock date %}
{% endblock additionalContent %}


        
            
            {
  "article": true,
  "categoryText": "Categoria",
  "heading": "Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam",
  "text": "Testo",
  "excerpt": "Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Leggi di più",
  "categoryVariant": "--sm",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  },
  "category": true,
  "date": true,
  "thumb": true,
  "fullClick": true
}

File:

Content:


                                /**
 * CARD
 *
*/
/* BASE */
.rtds-card {
    gap: var(--spacing-3);
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: var(--spacing-2);
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 768px) {
    .rtds-card {
        gap: var(--spacing-4);
    }
}
.rtds-card:where(:not(.rtds-card--horizontal)) {
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
}
.rtds-card:where(.rtds-card--horizontal) {
    align-items: flex-start;
    display: grid;
}
@media (min-width: 640px) {
    .rtds-card:where(.rtds-card--horizontal) {
        align-content: stretch;
        align-items: stretch;
    }
}
/* CARD IN GRID COL */
.rtds-col .rtds-card {
    height: 100%;
}
.is-card-fullclickable {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.is-card-fullclickable:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.rtds-card__heading {
    flex-direction: column-reverse;
    justify-content: flex-end;
    display: flex;
    gap: var(--spacing-2);
}
.rtds-card__image {
    aspect-ratio: 16 / 9;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.rtds-card__icon {
    height: var(--spacing-12);
    width: var(--spacing-12);
    background-color: transparent;
        color: var(--color-content-02);
    display: flex;
    justify-content: center;
    align-items: center;
}
:where(.rtds-card__icon) .rtds-icon {
    height: var(--spacing-12);
    width: var(--spacing-12);
}
.rtds-card__categories {
    margin-top: auto;
    flex-wrap: wrap;
    padding-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-2);
}
.rtds-card__content {
    flex: 1 1 0%;
    padding-bottom: var(--spacing-4);
    padding-top: var(--spacing-4);
    display: grid;
    gap: var(--spacing-2);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
:where(.rtds-card--horizontal) .rtds-card__content,
    :where(.rtds-card--news-small) .rtds-card__content {
    align-content: flex-start;
}
@media (min-width: 640px) {
    :where(.rtds-card--horizontal) .rtds-card__content,
    :where(.rtds-card--news-small) .rtds-card__content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
    }
}
:where(.rtds-card--has-footer) .rtds-card__content {
    padding-bottom: var(--spacing-1);
}
@media (min-width: 768px) {
    :where(.rtds-card--news-small:not(.rtds-card--horizontal)) .rtds-card__content {
        padding-top: var(--spacing-2);
    }
}
:where(.rtds-card--sito-tematico) .rtds-card__content {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
:where(.rtds-card--news-image-fullwidth) .rtds-card__content,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
}
@media (min-width: 768px) {
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
    :where(.rtds-card--news-image-fullwidth) .rtds-card__content {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
}
:where(.rtds-card--horizontal) .rtds-card__content {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}
:where(.rtds-card--related-info) .rtds-card__content {
    padding: var(--spacing-5);
}
@media (min-width: 640px) {
    :where(.rtds-card--related-info) .rtds-card__content {
        padding: var(--spacing-4);
    }
}
:where(.rtds-card--related-info-l) .rtds-card__content {
    padding: var(--spacing-5);
}
@media (min-width: 640px) {
    :where(.rtds-card--related-info-l) .rtds-card__content {
        justify-content: center;
        padding: var(--spacing-6);
    }
}
:where(.rtds-card--video) .rtds-card__content {
    gap: var(--spacing-2-5);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}
@media (min-width: 768px) {
    :where(.rtds-card--video) .rtds-card__content {
        gap: var(--spacing-3);
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }
}
.rtds-card--information .rtds-card__content {
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-0);
    display: flex;
}
@media (min-width: 1024px) {
    .rtds-card--information .rtds-card__content {
        gap: var(--spacing-5);
    }
}
.rtds-card__description {
    font-size: var(--fontsize-text-sm);
        color: var(--color-content-03);
}
.rtds-card__metadata {
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    display: flex;
    gap: var(--spacing-1);
}
.rtds-card__tags {
    margin-top: auto;
    flex-wrap: wrap;
    gap: var(--spacing-1-5);
    display: flex;
}
.rtds-card__date {
    font-size: var(--fontsize-text-sm);
        color: var(--color-content-03);
}
:where(.rtds-card--event) .rtds-card__date {
    order: 1;
    justify-self: start;
    border-bottom-width: 1px;
    padding-bottom: var(--spacing-3);
        border-color: var(--color-border-gray-01);
}
@media (min-width: 640px) {
    :where(.rtds-card--event) .rtds-card__date {
        width: 100%;
        border-right-width: 1px;
        border-bottom-width: 0px;
        padding-right: var(--spacing-4);
        padding-bottom: var(--spacing-0);
    }
}
:where(.rtds-card--news-small) .rtds-card__date {
    font-size: var(--fontsize-text-xs);
}
@media (min-width: 640px) {
    :where(.rtds-card--event-small) .rtds-card__date {
        border-right-width: 0px;
    }
}
.rtds-card__address {
    display: flex;
    gap: var(--spacing-1);
}
:where(.rtds-card__address) .rtds-icon {
        color: var(--color-content-category);
    flex: none;
}
:where(.rtds-card--news-small) .rtds-card__description,
    :where(.rtds-card--information) .rtds-card__description {
    font-size: var(--fontsize-text-sm);
}
.rtds-card__footer {
    margin-top: auto;
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    grid-area: footer;
}
/* VARIANTS */
/* MANAGE SIDE IMAGE */
.rtds-card--horizontal {
    grid-template-areas: 'thumb''content';
    display: grid;
}
@media (min-width: 640px) {
    .rtds-card--horizontal-left {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'thumb content';
    }
    .rtds-card--horizontal-right {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'content thumb';
    }
    .rtds-card--news-small:where(.rtds-card--horizontal-left) {
        grid-template-columns: 2fr 3fr;
        grid-template-areas: 'thumb content';
    }
    .rtds-card--news-image-square:where(.rtds-card--horizontal-left) {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: 'thumb content';
    }
}
.rtds-card--has-footer {
    grid-template-areas: 'thumb''content''footer';
}
@media (min-width: 640px) {
    .rtds-card--has-footer {
        grid-template-areas: 'thumb content''footer footer';
    }
}
.rtds-card--news:where(.rtds-card--horizontal-left) .rtds-card__footer {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
}
@media (min-width: 640px) {
    .rtds-card--news:where(.rtds-card--horizontal-left) .rtds-card__footer {
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }
    .rtds-card--information-left-icon {
        grid-template-columns: max-content 1fr;
        grid-template-areas: 'thumb content';
    }
    .rtds-card--information-right-icon {
        grid-template-columns: 1fr max-content;
        grid-template-areas: 'content thumb';
    }
}
:where(.rtds-card--horizontal) .rtds-card__image-wrapper,
    :where(.rtds-card--horizontal) .rtds-card__icon {
    grid-area: thumb;
}
:where(.rtds-card--horizontal) .rtds-card__content {
    grid-area: content;
}
:where(.rtds-card--horizontal:not(.rtds-card--news-image-left-fullwidth)) .rtds-card__image-wrapper {
    align-self: flex-start;
}
/* Card NEWS */
.rtds-card--news,
    .rtds-card--event {
        background-color: var(--color-background-01);
    }
:where(.rtds-card--news-no-thumb) .rtds-card__content {
    padding-top: var(--spacing-4);
}
:where(.rtds-card--news:not(.rtds-card--news-small)) .rtds-card__description {
    font-size: var(--fontsize-text-sm);
}
@media (min-width: 768px) {
    :where(.rtds-card--news:not(.rtds-card--news-small)) .rtds-card__description {
        font-size: var(--fontsize-text-base);
    }
}
body:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop,
    :root:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop,
    :root:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop {
        display: none;
    }
}
body:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop,
    :root:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop,
    :root:where(.rtds-card--news) .rtds-card__image-wrapper .rtds-primary-navigation__backdrop {
        display: none;
    }
}
:where(.rtds-card--news) .rtds-card__image-wrapper {
    border-radius: 0.25rem;
    overflow: hidden;
}
@media (min-width: 640px) {
    :where(.rtds-card--news-left) .rtds-card__image-wrapper,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper,
    :where(.rtds-card--news-small) .rtds-card__image-wrapper,
    :where(.rtds-card--related-info-l) .rtds-card__image-wrapper {
        min-width: 80px;
    }
}
.rtds-card--news-small,
    .rtds-card--news-left {
    gap: var(--spacing-3);
}
@media (min-width: 768px) {
    .rtds-card--news-small,
    .rtds-card--news-left {
        gap: var(--spacing-2);
    }
}
.rtds-card--news-image-fullwidth,
    .rtds-card--news-image-left-fullwidth {
    gap: var(--spacing-3);
    padding: var(--spacing-0);
}
:where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper {
    border-radius: 0px;
}
:where(.rtds-card--news-image-fullwidth) .rtds-card__image-wrapper {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.rtds-card--information {
    align-items: stretch;
    border-radius: 0.25rem;
    padding: var(--spacing-4);
}
@media (min-width: 768px) {
    .rtds-card--information {
        padding: var(--spacing-6);
    }
}
.rtds-card--sito-tematico {
    gap: var(--spacing-0);
    padding: var(--spacing-0);
}
:where(.rtds-card--sito-tematico) .rtds-card__image-wrapper {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where(.rtds-card--sito-tematico) .rtds-card__image {
    aspect-ratio: 3 / 1;
}
:where(.rtds-card--related-info) .rtds-card__image {
    aspect-ratio: 16 / 9;
    height: 100%;
}
:where(.rtds-card--news-image-square) .rtds-card__image {
    aspect-ratio: 1 / 1;
}
:where(.rtds-card--sito-tematico) .rtds-card__logo {
    margin-right: var(--spacing-4);
    width: var(--spacing-6);
    height: var(--spacing-6);
}
/* Card INFORMATION */
.rtds-card--information-02 {
    padding: var(--spacing-4);
        background-color: var(--color-background-01);
}
@media (min-width: 768px) {
    .rtds-card--information-02 {
        padding: var(--spacing-6);
    }
}
:where(.rtds-card--information-02) .rtds-card__description > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-3) * var(--tw-space-y-reverse));
}
:where(.rtds-card--information-02) .rtds-card__description {
    font-size: var(--fontsize-text-sm);
}
@media (min-width: 768px) {
    :where(.rtds-card--information-02) .rtds-card__description > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(var(--spacing-4) * var(--tw-space-y-reverse));
    }
    :where(.rtds-card--information-02) .rtds-card__description {
        font-size: var(--fontsize-text-base);
    }
}
:where(.rtds-card--information-02) .rtds-card__content {
    gap: var(--spacing-4);
    padding: var(--spacing-0);
}
:where(.rtds-card--information-02) .rtds-card__date {
    display: block;
    font-size: var(--fontsize-text-sm);
    font-weight: 700;
}
/* TITLE */
.rtds-card__title {
    font-size: var(--fontsize-text-lg);
    line-height: 1.25;
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-card__title {
        font-size: var(--fontsize-text-xl);
    }
}
.rtds-card__title a:hover {
    text-decoration-line: underline;
}
:where(.rtds-card__title) a {
    display: inline-block;
}
:where(.rtds-card__title) :where(.rtds-icon:not(.rtds-btn .rtds-icon)) {
    margin-left: auto;
        color: var(--color-link-primary);
    width: var(--spacing-4);
    height: var(--spacing-4);
}
@media (min-width: 768px) {
    :where(.rtds-card__title) :where(.rtds-icon:not(.rtds-btn .rtds-icon)) {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }
}
:where(.rtds-card--news-small) .rtds-card__title {
    font-size: var(--fontsize-text-base);
}
:where(.rtds-card--event) .rtds-card__heading {
    gap: var(--spacing-3);
}
:where(.rtds-card--event) .rtds-card__title {
    font-size: var(--fontsize-text-lg);
    line-height: 1.25;
}
:where(.rtds-card--information)  .rtds-card__title {
    font-size: var(--fontsize-text-xl);
        color: var(--color-content-02);
}
:where(.rtds-card--information-02) .rtds-card__title {
    font-size: var(--fontsize-text-xl);
        color: var(--color-content-01);
}
/* .rtds-card--widget .rtds-card__title {
        @apply rtds-content-01 rtds-text-2xl;
    } */
:where(.rtds-card--sito-tematico) .rtds-card__title {
    font-size: var(--fontsize-text-sm);
}
:where(.rtds-card--sito-tematico-l) .rtds-card__title {
    font-size: var(--fontsize-text-sm);
}
@media (min-width: 640px) {
    :where(.rtds-card--sito-tematico-l) .rtds-card__title {
        font-size: var(--fontsize-text-base);
    }
}
@media (min-width: 1024px) {
    :where(.rtds-card--sito-tematico-l) .rtds-card__title {
        font-size: var(--fontsize-text-lg);
    }
}
@media (min-width: 1280px) {
    :where(.rtds-card--sito-tematico-l) .rtds-card__title {
        font-size: var(--fontsize-text-xl);
    }
}
:where(.rtds-card--related-info) .rtds-card__title {
    font-size: var(--fontsize-text-lg);
}
@media (min-width: 640px) {
    :where(.rtds-card--related-info) .rtds-card__title {
        font-size: var(--fontsize-text-base);
    }
}
:where(.rtds-card--related-info-l) .rtds-card__title {
    font-size: var(--fontsize-text-lg);
}
@media (min-width: 640px) {
    :where(.rtds-card--related-info-l) .rtds-card__title {
        font-size: var(--fontsize-text-xl);
    }
}
:where(.rtds-card--persona) .rtds-card__title {
    font-size: var(--fontsize-text-base);
}
@media (min-width: 768px) {
    :where(.rtds-card--persona) .rtds-card__title {
        font-size: var(--fontsize-text-lg);
    }
}
/* CARD EVENT */
.rtds-card--event {
    padding: var(--spacing-0);
}
:where(.rtds-card--event:not(.rtds-card--event-small)) {
    align-content: flex-start;
}
:where(.rtds-card--event) .rtds-card__image-wrapper {
    border-radius: 0.25rem;
}
:where(.rtds-card--event) .rtds-card__content {
    gap: var(--spacing-2);
}
@media (min-width: 640px) {
    :where(.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--spacing-4);
    }
}
:where(.rtds-card--event-small) .rtds-card__content {
        grid-template-rows: auto 1fr;
    }
@media (min-width: 640px) {
    :where(.rtds-card--event-no-date) .rtds-card__content {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* CARD PERSONA */
.rtds-card--persona {
    padding: var(--spacing-4);
        background-color: var(--color-background-01);
}
:where(.rtds-card--persona) .rtds-card__content {
    padding: var(--spacing-0);
}
.rtds-card__user-role {
    font-size: var(--fontsize-text-xs);
    text-transform: uppercase;
        color: var(--color-content-03);
}
@media (min-width: 768px) {
    .rtds-card__user-role {
        font-size: var(--fontsize-text-sm);
    }
}
:where(.rtds-card--persona-complete) .rtds-card__heading {
    flex-direction: row;
    justify-content: flex-start;
}
/* Action link */
:where(.is-card-fullclickable) .rtds-card__action-link:hover {
    text-decoration-line: none;
}
/* Action menu */
.rtds-card__action-menu {
    position: relative;
    justify-content: flex-end;
    align-self: flex-start;
    display: flex;
}
.rtds-card__action-menu__trigger {
    height: var(--spacing-10);
    width: var(--spacing-10);
        color: var(--color-content-01);
}
.rtds-card__action-menu__trigger[aria-expanded="true"] {
        color: var(--color-content-inverse);
        background-color: var(--color-background-08);
    }
.rtds-card__action-menu-list {
    position: absolute;
    right: var(--spacing-0);
    top: var(--spacing-10);
    width: 25ch;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.rtds-card__action-menu-list-item {
    border-style: none;
    display: flex;
}
.rtds-card__action-menu-list-item-action {
    gap: var(--spacing-0-5);
    font-size: var(--fontsize-text-sm);
}
.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon),.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-square) {
    width: var(--spacing-6);
    height: var(--spacing-6);
}
.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-right),.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-left) {
    gap: var(--spacing-1-5);
}
.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-right) {
    padding-right: var(--spacing-3);
}
.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-left) {
    padding-left: var(--spacing-3);
}
.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon),.rtds-card__action-menu-list-item-action:where(.rtds-btn--icon-square) {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
}
.rtds-card__action-menu-list-item-action {
    width: 100%;
    justify-content: flex-start;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: var(--spacing-3);
    font-size: var(--fontsize-text-sm);
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        color: var(--color-content-primary-dark);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.rtds-card__action-menu-list-item-action:hover {
    text-decoration-line: underline;
        background-color: var(--color-background-02);
}
.rtds-card__action-menu-list-item-action:focus {
        background-color: var(--color-background-02);
    }
/* USER AVATAR */
body.rtds-card__user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-card__user-avatar .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-card__user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-card__user-avatar .rtds-primary-navigation__backdrop {
        display: none;
    }
}
body.rtds-card__user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-card__user-avatar .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-card__user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-card__user-avatar .rtds-primary-navigation__backdrop {
        display: none;
    }
}
.rtds-card__user-avatar {
    height: var(--spacing-14);
    width: var(--spacing-14);
    border-radius: 9999px;
    overflow: hidden;
    flex: none;
}
.rtds-card__user-avatar img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
/* CARD GUIDA */
.rtds-card--guida {
        background-color: var(--color-background-01);
        border-color: var(--color-border-gray-01);
    border-width: 1px;
}
:where(.rtds-card--guida) .rtds-card__title {
    font-size: var(--fontsize-text-lg);
}
@media (min-width: 768px) {
    :where(.rtds-card--guida) .rtds-card__title {
        font-size: var(--fontsize-text-xl);
    }
}
@media (min-width: 1024px) {
    :where(.rtds-card--guida) .rtds-card__title {
        font-size: var(--fontsize-text-2xl);
    }
}
:where(.rtds-card--guida) .rtds-card__content {
    gap: var(--spacing-4);
    padding: var(--spacing-4);
}
@media (min-width: 768px) {
    :where(.rtds-card--guida) .rtds-card__content {
        gap: var(--spacing-6);
        padding: var(--spacing-5);
    }
}
@media (min-width: 1024px) {
    :where(.rtds-card--guida) .rtds-card__content {
        padding: var(--spacing-6);
    }
}
:where(.rtds-card--guida) .rtds-card__description {
    display: flex;
    gap: var(--spacing-2);
}
@media (min-width: 768px) {
    :where(.rtds-card--guida) .rtds-card__description {
        gap: var(--spacing-2-5);
    }
}

URL: /components/raw/card/card.built.css
Filesystem Path: components/03-molecules/card/card.built.css
Size: 23.7 KB

Content:


                                /**
 * CARD
 *
*/
@layer components {
    /* BASE */
    .rtds-card {
        @apply rtds-gap-3 md:rtds-gap-4 rtds-p-2 rtds-bg-white rtds-shadow-md rtds-rounded;
    }

    .rtds-card:where(:not(.rtds-card--horizontal)) {
        @apply rtds-flex rtds-flex-col rtds-justify-start;
    }

    .rtds-card:where(.rtds-card--horizontal) {
        @apply rtds-grid rtds-items-start sm:rtds-content-stretch sm:rtds-items-stretch;
    }

    /* CARD IN GRID COL */
    .rtds-col .rtds-card {
        @apply rtds-h-full;
    }

    .is-card-fullclickable {
        @apply rtds-transition-all hover:rtds-shadow-lg rtds-cursor-pointer;
    }

    .rtds-card__heading {
        @apply rtds-flex rtds-justify-end rtds-flex-col-reverse rtds-gap-2;
    }

    .rtds-card__image {
        @apply rtds-w-full rtds-aspect-video rtds-object-cover;
    }

    .rtds-card__icon {
        @apply rtds-flex rtds-items-center rtds-justify-center rtds-w-12 rtds-h-12 rtds-bg-transparent rtds-content-02;
    }

    :where(.rtds-card__icon) .rtds-icon {
        @apply rtds-w-12 rtds-h-12;
    }

    .rtds-card__categories {
        @apply rtds-mt-auto rtds-flex rtds-gap-2 rtds-pt-4 rtds-flex-wrap;
    }

    .rtds-card__content {
        @apply rtds-grid rtds-gap-2 rtds-px-4 rtds-pb-4 rtds-pt-4 rtds-flex-1;
    }

    :where(.rtds-card--horizontal) .rtds-card__content,
    :where(.rtds-card--news-small) .rtds-card__content {
        @apply rtds-content-start sm:rtds-pt-2 sm:rtds-pb-2 sm:rtds-flex sm:rtds-flex-col sm:rtds-justify-start;
    }


    :where(.rtds-card--has-footer) .rtds-card__content {
        @apply rtds-pb-1;
    }

    :where(.rtds-card--news-small:not(.rtds-card--horizontal)) .rtds-card__content {
        @apply md:rtds-pt-2;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__content {
        @apply rtds-px-2 rtds-py-3;
    }


    :where(.rtds-card--news-image-fullwidth) .rtds-card__content,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
        @apply rtds-px-3;
    }

    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
        @apply md:rtds-px-4 md:rtds-py-4;
    }

    :where(.rtds-card--news-image-fullwidth) .rtds-card__content {
        @apply md:rtds-px-4;
    }

    :where(.rtds-card--horizontal) .rtds-card__content {
        @apply rtds-px-2;
    }

    :where(.rtds-card--related-info) .rtds-card__content {
        @apply rtds-p-5 sm:rtds-p-4;
    }
    
    :where(.rtds-card--related-info-l) .rtds-card__content {
        @apply  rtds-p-5 sm:rtds-p-6 sm:rtds-justify-center;
    }

    :where(.rtds-card--video) .rtds-card__content {
        @apply rtds-gap-2.5 md:rtds-gap-3 rtds-px-2 md:rtds-px-3 rtds-pb-2 md:rtds-pb-3;
    }

    .rtds-card--information .rtds-card__content {
        @apply rtds-p-0 rtds-flex rtds-flex-col rtds-gap-4 lg:rtds-gap-5;
    }

    .rtds-card__description {
        @apply rtds-content-03 rtds-text-sm;
    }

    .rtds-card__metadata {
        @apply rtds-flex rtds-items-baseline rtds-justify-between rtds-flex-wrap rtds-gap-1;
    }

    .rtds-card__tags {
        @apply rtds-flex rtds-gap-1.5 rtds-flex-wrap rtds-mt-auto;
    }

    .rtds-card__date {
        @apply rtds-text-sm rtds-content-03;
    }

    :where(.rtds-card--event) .rtds-card__date {
        @apply rtds-order-1 rtds-justify-self-start sm:rtds-w-full rtds-pb-3 sm:rtds-pr-4 sm:rtds-pb-0 rtds-border-b sm:rtds-border-r sm:rtds-border-b-0 rtds-border-gray-01;
    }

    :where(.rtds-card--news-small) .rtds-card__date {
        @apply rtds-text-xs;
    }

    :where(.rtds-card--event-small) .rtds-card__date {
        @apply sm:rtds-border-r-0;
    }

    .rtds-card__address {
        @apply rtds-flex rtds-gap-1;
    }

    :where(.rtds-card__address) .rtds-icon {
        @apply rtds-flex-none rtds-content-category;
    }

    :where(.rtds-card--news-small) .rtds-card__description,
    :where(.rtds-card--information) .rtds-card__description {
        @apply rtds-text-sm;
    }

    .rtds-card__footer {
        @apply rtds-mt-auto rtds-px-3 [grid-area:footer];
    }

    /* VARIANTS */
    /* MANAGE SIDE IMAGE */
    .rtds-card--horizontal {
        @apply rtds-grid [grid-template-areas:'thumb''content'];
    }

    .rtds-card--horizontal-left {
        @apply sm:rtds-grid-cols-[1fr_1fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--horizontal-right {
        @apply sm:rtds-grid-cols-[1fr_1fr] sm:[grid-template-areas:'content_thumb'];
    }

    .rtds-card--news-small:where(.rtds-card--horizontal-left)  {
        @apply sm:rtds-grid-cols-[2fr_3fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--news-image-square:where(.rtds-card--horizontal-left)  {
        @apply sm:rtds-grid-cols-[1fr_3fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--has-footer {
        @apply [grid-template-areas:'thumb''content''footer'] sm:[grid-template-areas:'thumb_content''footer_footer'];
    }

    .rtds-card--news:where(.rtds-card--horizontal-left) .rtds-card__footer {
        @apply rtds-px-3 sm:rtds-px-0;
    }

    .rtds-card--information-left-icon {
        @apply sm:rtds-grid-cols-[max-content_1fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--information-right-icon {
        @apply sm:rtds-grid-cols-[1fr_max-content] sm:[grid-template-areas:'content_thumb'];
    }

    :where(.rtds-card--horizontal) .rtds-card__image-wrapper,
    :where(.rtds-card--horizontal) .rtds-card__icon {
        @apply [grid-area:thumb];
    }

    :where(.rtds-card--horizontal) .rtds-card__content {
        @apply [grid-area:content];
    }

    :where(.rtds-card--horizontal:not(.rtds-card--news-image-left-fullwidth)) .rtds-card__image-wrapper {
        @apply rtds-self-start;
    }

    /* Card NEWS */
    .rtds-card--news,
    .rtds-card--event {
        @apply rtds-background-01;
    }

    :where(.rtds-card--news-no-thumb) .rtds-card__content {
        @apply rtds-pt-4;
    }

    :where(.rtds-card--news:not(.rtds-card--news-small)) .rtds-card__description {
        @apply rtds-text-sm md:rtds-text-base;
    }

    :where(.rtds-card--news) .rtds-card__image-wrapper {
        @apply rtds-rounded rtds-overflow-hidden;
    }

    :where(.rtds-card--news-left) .rtds-card__image-wrapper,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper,
    :where(.rtds-card--news-small) .rtds-card__image-wrapper,
    :where(.rtds-card--related-info-l) .rtds-card__image-wrapper {
        @apply sm:rtds-min-w-[80px];
    }

    .rtds-card--news-small,
    .rtds-card--news-left {
        @apply rtds-gap-3 md:rtds-gap-2;
    }

    .rtds-card--news-image-fullwidth,
    .rtds-card--news-image-left-fullwidth {
        @apply rtds-gap-3 rtds-p-0;
    }

    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper {
        @apply rtds-rounded-none;
    }

    :where(.rtds-card--news-image-fullwidth) .rtds-card__image-wrapper {
        @apply rtds-rounded-b-none;
    }

    .rtds-card--information {
        @apply rtds-p-4 md:rtds-p-6 rtds-rounded rtds-items-stretch;
    }

    .rtds-card--sito-tematico {
        @apply rtds-p-0 rtds-gap-0;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__image-wrapper {
        @apply rtds-shadow-md;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__image {
        @apply rtds-aspect-wide;
    }

    :where(.rtds-card--related-info) .rtds-card__image {
        @apply rtds-aspect-video rtds-h-full;
    }

    :where(.rtds-card--news-image-square) .rtds-card__image {
        @apply rtds-aspect-square;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__logo {
        @apply rtds-w-6 rtds-h-6 rtds-mr-4;
    }

    /* Card INFORMATION */

    .rtds-card--information-02 {
        @apply rtds-p-4 md:rtds-p-6 rtds-background-01;
    }

    :where(.rtds-card--information-02) .rtds-card__description {
        @apply rtds-text-sm md:rtds-text-base rtds-space-y-3 md:rtds-space-y-4;
    }

    :where(.rtds-card--information-02) .rtds-card__content {
        @apply rtds-p-0 rtds-gap-4;
    }

    :where(.rtds-card--information-02) .rtds-card__date {
        @apply rtds-block rtds-text-sm rtds-font-bold;
    }

    /* TITLE */
    .rtds-card__title {
        @apply rtds-font-bold rtds-leading-tight rtds-text-lg lg:rtds-text-xl;
    }

    .rtds-card__title a {
        @apply hover:rtds-underline;
    }

    :where(.rtds-card__title) a {
        @apply rtds-inline-block;
    }

    :where(.rtds-card__title) :where(.rtds-icon:not(.rtds-btn .rtds-icon)) {
        @apply rtds-ml-auto rtds-link-primary rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5;
    }

    
    :where(.rtds-card--news-small) .rtds-card__title {
        @apply rtds-text-base;
    }

    :where(.rtds-card--event) .rtds-card__heading {
        @apply rtds-gap-3;
    }

    :where(.rtds-card--event) .rtds-card__title {
        @apply  rtds-text-lg rtds-leading-tight;
    }

    :where(.rtds-card--information)  .rtds-card__title {
        @apply rtds-content-02 rtds-text-xl;
    }

    :where(.rtds-card--information-02) .rtds-card__title {
        @apply rtds-content-01 rtds-text-xl;
    }

    /* .rtds-card--widget .rtds-card__title {
        @apply rtds-content-01 rtds-text-2xl;
    } */

    :where(.rtds-card--sito-tematico) .rtds-card__title {
        @apply rtds-text-sm;
    }

    :where(.rtds-card--sito-tematico-l) .rtds-card__title {
        @apply rtds-text-sm sm:rtds-text-base lg:rtds-text-lg xl:rtds-text-xl;
    }

    :where(.rtds-card--related-info) .rtds-card__title {
        @apply rtds-text-lg sm:rtds-text-base;
    }

    :where(.rtds-card--related-info-l) .rtds-card__title {
        @apply rtds-text-lg sm:rtds-text-xl;
    }

    :where(.rtds-card--persona) .rtds-card__title {
        @apply rtds-text-base md:rtds-text-lg;
    }

    /* CARD EVENT */
    .rtds-card--event {
        @apply rtds-p-0;
    }

    :where(.rtds-card--event:not(.rtds-card--event-small)) {
        @apply rtds-content-start;
    }

    :where(.rtds-card--event) .rtds-card__image-wrapper {
        @apply rtds-rounded;
    }

    :where(.rtds-card--event) .rtds-card__content {
        @apply rtds-gap-2;
    }

    :where(.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
        @apply sm:rtds-grid sm:rtds-gap-4 sm:rtds-grid-cols-1-2;
    }

    :where(.rtds-card--event-small) .rtds-card__content {
        grid-template-rows: auto 1fr;
    }

    :where(.rtds-card--event-no-date) .rtds-card__content {
        @apply sm:rtds-grid-cols-1;
    }

    /* CARD PERSONA */
    .rtds-card--persona {
        @apply rtds-background-01 rtds-p-4;
    }

    :where(.rtds-card--persona) .rtds-card__content {
        @apply rtds-p-0;
    }

    .rtds-card__user-role {
        @apply rtds-text-xs md:rtds-text-sm rtds-uppercase rtds-content-03;
    }

    :where(.rtds-card--persona-complete) .rtds-card__heading {
        @apply rtds-flex-row rtds-justify-start;
    }

    /* Action link */
    :where(.is-card-fullclickable) .rtds-card__action-link {
        @apply hover:rtds-no-underline;
    }

    /* Action menu */
    .rtds-card__action-menu {
        @apply rtds-flex rtds-justify-end rtds-relative rtds-self-start;
    }

    .rtds-card__action-menu__trigger {
        @apply rtds-w-10 rtds-h-10 rtds-content-01;
    }

    .rtds-card__action-menu__trigger[aria-expanded="true"] {
        @apply rtds-background-08 rtds-content-inverse;
    }

    .rtds-card__action-menu-list {
        @apply rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg;
    }

    .rtds-card__action-menu-list-item {
        @apply rtds-flex rtds-border-none;
    }

    .rtds-card__action-menu-list-item-action {
        @apply rtds-flex rtds-justify-start rtds-gap-2 rtds-items-center rtds-p-3 rtds-btn--s rtds-w-full rtds-transition rtds-bg-white rtds-font-medium rtds-text-sm rtds-content-primary-dark hover:rtds-underline hover:rtds-background-02 focus:rtds-background-02;
    }

    /* USER AVATAR */
    .rtds-card__user-avatar {
        @apply rtds-flex-none rtds-w-14 rtds-h-14 rtds-rounded-full rtds-overflow-hidden;
    }

    .rtds-card__user-avatar img {
        @apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
    }

    /* CARD GUIDA */
    .rtds-card--guida {
        @apply rtds-background-01 rtds-border rtds-border-gray-01;
    }

    :where(.rtds-card--guida) .rtds-card__title {
        @apply rtds-text-lg md:rtds-text-xl lg:rtds-text-2xl;
    }

    :where(.rtds-card--guida) .rtds-card__content {
        @apply rtds-p-4 md:rtds-p-5 lg:rtds-p-6 rtds-gap-4 md:rtds-gap-6;
    }

    :where(.rtds-card--guida) .rtds-card__description {
        @apply rtds-flex rtds-gap-2 md:rtds-gap-2.5;
    }

}

URL: /components/raw/card/card.css
Filesystem Path: components/03-molecules/card/card.css
Size: 12.7 KB

Content:


                                /* From INCLUSIVE COMPONENT LIBRARY by Heydon Pickering 
* https://inclusive-components.design/
* card pattern:
* https://inclusive-components.design/cards/
* Create redundant click event on the whole card, using only
* card heading link
* A click handler on the card's container element 
* simply triggers the click method on the link inside it
* Add also a delay in click, in order to detect if the user is selecting the text and not clicking
*/

const cards = document.querySelectorAll('.rtds-card.is-card-fullclickable');
Array.prototype.forEach.call(cards, card => {
    let down, up, link = card.querySelector('.rtds-card__title a');
    card.style.cursor = 'pointer';
    card.onmousedown = (e) => {
        // Verifica se è il tasto sinistro (0)
        if (e.button === 0) {
            down = +new Date();
        }
    }
    card.onmouseup = (e) => {
        // Procedi solo se è il tasto sinistro (0)
        if (e.button === 0) {
            up = +new Date();
            if ((up - down) < 200) {
                link.click();
            }
        }
    }
});


//Js per card con accordion
(function() {
    'use strict';
    
    document.addEventListener('DOMContentLoaded', function() {
        const toggleElements = document.querySelectorAll('.rtds-js-accordion-toggle');
        
        toggleElements.forEach(function(element) {
            element.addEventListener('click', function() {
                const content = document.getElementById('accordion-content');
                const button = element.dataset.role === 'button' ? element : element.previousElementSibling;
                const icon = button.querySelector('svg');
                
                if (content) {
                    if (content.classList.contains('rtds-hidden')) {
                        // Apri accordion
                        content.classList.remove('rtds-hidden');
                        button.setAttribute('aria-expanded', 'true');
                      
                    } else {
                        // Chiudi accordion
                        content.classList.add('rtds-hidden');
                        button.setAttribute('aria-expanded', 'false');
                      
                    }
                }
            });
        });
    });
})();

URL: /components/raw/card/card.js
Filesystem Path: components/03-molecules/card/card.js
Size: 2.3 KB

Handle: @card--event-small
Variants (29): Default , News , News No Thumb , News Small , News Small Image Square , News Small No Thumb , News Thumb Left , News Image Fullwidth , Approfondimento , News Image Left Fullwidth , Information , Information With Gradient , Information Icon , Information Left Icon , Information Right Icon , Information 02 , Event , Event No Date , Event Small , Sito Tematico , Related Info , Related Info L , Sito Tematico L , Widget , Widget Procedimento , Persona , Persona Complete , Video , Guida
Preview:
- With layout
- Component only
Filesystem Path: components/03-molecules/card/card--event-small.njk
References (2): @card, @icon

Card

Componente card sviluppato seguendo il pattern inclusivo di Heydon Pickering: https://inclusive-components.design/cards/

Comportamento

Il componente può essere renderizzato come:

<article> — elemento di default; usare per card che rappresentano entità autonome (notizie, eventi, guide)
<div> — quando article: false nel contesto Fractal/Nunjucks; usare per card inserite in liste non autonome (avvolte in <li> di una <ul role="list">)

L’intestazione della card è di default un <h3>. La card completamente cliccabile (is-card-fullclickable) è gestita tramite JavaScript: il link semantico rimane solo nel titolo, mentre l’intera area è cliccabile per l’utente.

Varianti

Varianti di Stile

card--footer: Card con footer
card--notizia: Card notizia standard
card--notizia-small: Card notizia piccola
card--notizia-thumb-left: Card notizia con miniatura a sinistra
card--notizia-full-image: Card notizia con immagine a larghezza piena
card--approfondimento: Card approfondimento
card--informativa: Card informativa (con e senza gradiente)
card--evento: Card evento (standard, senza data, piccola)
card--sito-tematico: Card sito tematico
card--widget: Card widget
card--procedimento: Card procedimento
card--persona: Card per la visualizzazione di profili utente con avatar, ruolo e contatti
card--persona-complete: Variante della card persona con action menu per azioni aggiuntive
card--video: Card per la visualizzazione di contenuti video con trascrizione
card--guida: Card per la visualizzazione di guide e documentazione

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

classes (stringa, opzionale): classi CSS aggiuntive per la card
heading (stringa, opzionale): titolo della card
headingClasses (stringa, opzionale): classi aggiuntive per l’intestazione
h2 (booleano, opzionale): utilizza <h2> invece di <h3> come intestazione (default: false)
headingLinkClasses (stringa, opzionale): classi personalizzate per il link dell’intestazione
headingLinkIcon (stringa, opzionale): ID icona per il link dell’intestazione
excerpt (stringa, opzionale): testo dell’estratto (usare "is-empty" per disabilitarlo)
excerptClasses (stringa, opzionale): classi per l’estratto
contentGap (stringa, opzionale): classe del gap del contenuto (default: gap-4)
contentClasses (stringa, opzionale): classi aggiuntive per il wrapper del contenuto
headingGap (stringa, opzionale): gap degli elementi dell’intestazione (default: gap-4)
categoryText (stringa, opzionale): testo della categoria (default: “Categoria”)
categoryVariant (stringa, opzionale): variante della categoria (es. '--sm')

Parametri Icone

icon (stringa, opzionale): ID dell’icona superiore
iconSize (stringa, opzionale): classi di larghezza e altezza dell’icona
iconRadius (stringa, opzionale): gestisce il bordo dell’icona superiore
iconBg (stringa, opzionale): colore di sfondo dell’icona superiore
iconBorder (stringa, opzionale): bordo dell’icona superiore
iconColor (stringa, opzionale): colore dell’icona superiore
ctaIcon (stringa, opzionale): ID dell’icona per il CTA
ctaWrapperClasses (stringa, opzionale): classi per il wrapper del CTA
ctaLinkLabel (stringa, opzionale): etichetta per il link CTA

Parametri Immagine

img (oggetto, opzionale): configurazione immagine
- path (stringa): percorso immagine
- alt (stringa): testo alternativo
- imgObjectFit (stringa): gestisce l’object-fit
thumbSize (stringa, opzionale): dimensione della miniatura
thumbAspectRatio (stringa, opzionale): classi dell’aspect ratio
thumbClasses (stringa, opzionale): classi della miniatura
thumbFullHeight (booleano, opzionale): imposta l’altezza completa della miniatura
headingThumb (oggetto, opzionale): miniatura dell’intestazione con path e srcset

Parametri Booleani Componenti

article (booleano, opzionale): usa <article> come tag (default: true)
category (booleano, opzionale): mostra la categoria
ctaLink (booleano, opzionale): mostra il link CTA
cta (booleano, opzionale): mostra il pulsante CTA
tags (booleano, opzionale): mostra la lista dei tag
date (booleano, opzionale): mostra la data
thumb (booleano, opzionale): mostra la miniatura
hasSideThumb (booleano, opzionale): aggiunge classi per miniatura laterale sinistra
hasRightSideThumb (booleano, opzionale): aggiunge classi per miniatura laterale destra
fullClick (booleano, opzionale): aggiunge lo script per l’area cliccabile completa
fileDetails (booleano, opzionale): aggiunge informazioni sul file
scadenza (booleano, opzionale): mostra la data di scadenza

Parametri Card Persona

userAvatar (oggetto, opzionale): configurazione dell’avatar utente
- path (stringa): percorso dell’immagine
- alt (stringa): testo alternativo
- srcset (stringa): set di sorgenti per immagini responsive
userRole (stringa, opzionale): ruolo professionale della persona
contacts (array, opzionale): lista dei contatti con label, href, icon, accessibleLabelBefore

Parametri Card Persona-Complete

hasActionMenu (booleano, opzionale): attiva il menu delle azioni
hasActionDelete (booleano, opzionale): attiva l’opzione di cancellazione
editId (stringa, opzionale): ID univoco per il menu (es. "01")
profileDialogId (stringa, opzionale): ID del modal del profilo

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

1.1.1 Contenuti non testuali — le immagini della card devono avere un attributo alt descrittivo (o vuoto se decorative)
1.3.1 Informazioni e correlazioni — il componente usa <article> o <div> contestualmente; i tag <h3> / <h2> esprimono la gerarchia dei titoli; le categorie sono strutturate come <ul aria-label="Categorie">
2.4.4 Scopo del collegamento (nel contesto) — il link sul titolo include un <span class="rtds-sr-only">: leggi di più</span> quando è presente un CTA aggiuntivo, per disambiguare lo scopo del link per gli screen reader
4.1.2 Nome, ruolo, valore — la card persona-complete usa aria-expanded, aria-controls e aria-haspopup="dialog" sull’action menu

Struttura e semantica

Il componente è renderizzato come <article> quando rappresenta un’entità autonoma (notizia, evento, guida), o come <div> quando inserito in liste di card non autonome
L’intestazione del titolo è un <h3> o <h2>; la sezione che contiene le card deve avere un heading di livello superiore, visibile o nascosto tramite rtds-sr-only
L’elemento <time datetime="..."> identifica semanticamente le date
Le liste di tag usano <ul aria-label="Categorie"> per comunicare il ruolo della lista agli screen reader

Attributi ARIA

Attributo	Valori	Condizione
`aria-expanded`	`"true"` / `"false"`	presente sul trigger dell’action menu nella variante persona-complete
`aria-controls`	ID del dropdown	presente sul trigger dell’action menu nella variante persona-complete
`aria-haspopup`	`"dialog"`	presente sul trigger dell’action menu nella variante persona-complete
`aria-label`	`"Categorie"`	presente sulla `<ul>` dei tag

Navigazione da tastiera

Tasto	Azione
`Tab` / `Shift+Tab`	Sposta il focus tra i link e i pulsanti della card
`Enter`	Attiva il link o il pulsante corrente

Gestione del focus

Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Il <span class="rtds-sr-only"> nel link del titolo (presente quando c’è un CTA aggiuntivo) disambigua il nome accessibile del link evitando etichette duplicate per gli screen reader
L’<img> dell’avatar utente nelle card persona deve avere un alt descrittivo (es. nome della persona)
Le icone decorative (frecce, separatori) hanno aria-hidden="true" — lo screen reader le ignora; le icone informative (es. tipologia file) sono accompagnate da <span class="rtds-sr-only"> con il testo equivalente
La card con is-card-fullclickable gestisce il click sull’intera area via JS, ma il link semantico rimane solo nel titolo — lo screen reader legge e naviga solo tramite questo link

Esempi di utilizzo

<!-- Card notizia base -->
<article class="rtds-card rtds-card--notizia">
  <div class="rtds-card__content">
    <h3 class="rtds-card__heading">
      <a href="/notizia" class="rtds-card__heading-link">Titolo della notizia</a>
    </h3>
    <p class="rtds-card__excerpt">Estratto della notizia...</p>
  </div>
</article>

<!-- Card con area completamente cliccabile -->
<article class="rtds-card rtds-card--notizia is-card-fullclickable">
  <div class="rtds-card__content">
    <h3 class="rtds-card__heading">
      <a href="/notizia" class="rtds-card__heading-link">Titolo della notizia</a>
    </h3>
  </div>
</article>

<!-- Card persona -->
<article class="rtds-card rtds-card--persona">
  <div class="rtds-card__content">
    <img src="/avatar.jpg" alt="Nome Persona" class="rtds-card__avatar">
    <h3 class="rtds-card__heading">Nome Persona</h3>
    <p class="rtds-card__role">Ruolo professionale</p>
  </div>
</article>

Note

Per impostazione predefinita il tag è <article>; usare article: false e avvolgere in <li> di una <ul role="list"> quando le card non sono entità autonome
L’intestazione default è <h3>: la sezione contenitrice deve avere un <h2> visibile o nascosto (rtds-sr-only)
Il link alla trascrizione nelle card video deve includere uno <span class="rtds-sr-only"> con il titolo del video

Example card component: Event Small

Card

Comportamento

Varianti

Varianti di Stile

Parametri di configurazione

Parametri Base

Parametri Icone

Parametri Immagine

Parametri Booleani Componenti

Parametri Card Persona

Parametri Card Persona-Complete

Accessibilità

WCAG 2.1

Struttura e semantica

Attributi ARIA

Navigazione da tastiera

Gestione del focus

Screen reader

Esempi di utilizzo

Note