Regione Toscana Design System

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 */
@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;
    }

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

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

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

    .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: 847 Bytes

No notes defined.