Regione Toscana Design System — Servizi Design System Core

Widget Box 

<section class="rtds-widget-box">
    <div class="rtds-widget-box__header">
        <h2 class="rtds-widget-box__title">Dato semplice</h2>
    </div>
    <div class="rtds-widget-box__content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            quos.
        </p>
        <p>
            Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            quos.
        </p>
        <p>
            Email: <a href="mailto:info@example.com">info@example.com</a>
        </p>

        <p>
            Telefono: <a href="tel:0123456789">0123456789</a>
        </p>

    </div>

    <div class="rtds-widget-box__header">
        <h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
    </div>

    <div class="rtds-widget-box__content">
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
        </ul>
    </div>
</section>
 
<section class="rtds-widget-box">
    <div class="rtds-widget-box__header">
        <h2 class="rtds-widget-box__title">Dato semplice</h2>
    </div>
    <div class="rtds-widget-box__content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            quos.
        </p>
        <p>
            Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            quos.
        </p>
        <p>
           Email: <a href="mailto:info@example.com">info@example.com</a>
        </p>
     
        <p>
           Telefono: <a href="tel:0123456789">0123456789</a>
        </p>
     
    </div>

    <div class="rtds-widget-box__header">
        <h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
    </div>

    <div class="rtds-widget-box__content">
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
        </ul>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    /* widget-box */
.rtds-widget-box > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.rtds-widget-box {
    border-style: solid;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        border-color: var(--color-border-gray-03);
    border-radius: 0.5rem;
    border-width: 1px;
}
.rtds-widget-box__header {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    font-size: var(--fontsize-text-base);
        background-color: var(--color-background-03);
        border-color: var(--color-border-gray-03);
    line-height: 1;
    font-weight: 700;
}
@media (min-width: 1024px) {
    .rtds-widget-box__header {
        font-size: var(--fontsize-text-lg);
    }
}
.rtds-widget-box__content {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    font-size: var(--fontsize-text-sm);
        border-color: var(--color-border-gray-03);
}
@media (min-width: 1024px) {
    .rtds-widget-box__content {
        font-size: var(--fontsize-text-base);
    }
}
:where(.rtds-widget-box > *):first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
:where(.rtds-widget-box > *):last-child {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
:where(.rtds-widget-box ul) {
    list-style-type: disc;
}
:where(.rtds-widget-box ul) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
:where(.rtds-widget-box ul) {
    padding-left: var(--spacing-4);
}
:where(.rtds-widget-box li) {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
        border-color: var(--color-border-gray-02);
}
:where(.rtds-widget-box a) {
    text-decoration-line: underline;
}
:where(.rtds-widget-box a):hover {
    text-decoration-line: none;
}
  • URL: /components/raw/widget-box/widget-box.built.css
  • Filesystem Path: components/07-widgets/widget-components/widget-box/widget-box.built.css
  • Size: 2.4 KB
  • Content: 
    /* widget-box */
@layer components {
    .rtds-widget-box {
        @apply rtds-bg-white rtds-border rtds-border-solid rtds-border-gray-03 rtds-rounded-lg rtds-shadow-sm rtds-divide-y;
    }

    .rtds-widget-box__header {
        @apply rtds-background-03 rtds-border-gray-03 rtds-py-4 rtds-px-3 rtds-font-bold rtds-text-base lg:rtds-text-lg rtds-leading-none;
    }

    .rtds-widget-box__content {
        @apply rtds-py-4 rtds-px-3 rtds-border-gray-03 rtds-text-sm lg:rtds-text-base;
    }

    :where(.rtds-widget-box > *) {
        @apply first:rtds-rounded-t-lg last:rtds-rounded-b-lg;
    }

    :where(.rtds-widget-box ul) {
        @apply rtds-list-disc rtds-pl-4 rtds-divide-y;
    }

    :where(.rtds-widget-box li) {
        @apply rtds-border-gray-02 rtds-py-2;
    }

    :where(.rtds-widget-box a) {
        @apply rtds-underline hover:rtds-no-underline;
    }

}
  • URL: /components/raw/widget-box/widget-box.css
  • Filesystem Path: components/07-widgets/widget-components/widget-box/widget-box.css
  • Size: 879 Bytes

No notes defined.