Paragrafo testo e immagini

ultimo aggiornamento 7/10/24

Componenti standard per contenuti costituiti da testo e immagini o icone

Testo e immagine Testo e icona Testo e link card

Testo e immagine

Nelle diverse varianti, l'aspect ratio dell'immagine è impostato a partire dal numero di colonne della griglia che la contiene; si consiglia di utilizzare immagini della dimensione indicata negli esempi.

Tutte le varianti prevedono la presenza della classe .paragrafi associata all'elemento contenitore.

Tutti gli esempi di codice sono specifici per la Versione 3.1 del tema

Titolo

Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur.

link a contenuto

Titolo

link a contenuto

<div class="row align-items-center paragrafi">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-6 order-1 order-lg-0 p-3 ps-lg-0">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. </p>
            <a class="d-block " href="#" title="lorem ipsum">link a contenuto<svg role="img" aria-describedby="icon-title" class="icon">
                    <title id="icon-title">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use>
                </svg></a>
        </div>
        <div class="col-12 col-lg-6 p-0 order-0 order-lg-1"><img src="https://tema.unito.it/v3/assets/images/546x234.jpg"></div>
    </div>
    <div class="row mt-4 align-items-center paragrafi standard">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-6 p-0">
            <img src="https://tema.unito.it/v3/assets/images/546x234.jpg">
        </div>
        <div class="col-12 col-lg-6 p-3"><p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. </p>
            <a class="d-block " href="#" title="lorem ipsum">link a contenuto<svg role="img" aria-describedby="icon-title" class="icon">
                    <title id="icon-title">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use>
                </svg></a>
        </div>
    </div>

Titolo

link a contenuto

Titolo

link a contenuto

<div class="row align-items-center paragrafi">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-10 order-1 order-lg-0 p-3 ps-lg-0 pe-lg-2">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. </p>
            <a class="d-block " href="#" title="lorem ipsum">link a contenuto<svg role="img" aria-describedby="icon-title" class="icon">
                    <title id="icon-title">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use>
                </svg></a>
        </div>
        <div class="col-12 col-lg-2 order-0 order-lg-1 p-0"><img src="https://tema.unito.it/v3/assets/images/204x204.jpg"></div>
    </div>
    <div class="row align-items-center paragrafi">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-2 p-0"><img src="https://tema.unito.it/v3/assets/images/204x204.jpg"></div>
        <div class="col-12 col-lg-10 p-3 ps-lg-2 pe-lg-0">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. </p>
            <a class="d-block " href="#" title="lorem ipsum">link a contenuto<svg role="img" aria-describedby="icon-title" class="icon">
                    <title id="icon-title">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use>
                </svg></a>
        </div>
    </div>

Titolo

link a contenuto

<div class="row align-items-center paragrafi">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-12 p-0">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. </p>
            <a class="d-block " href="#" title="lorem ipsum">link a contenuto<svg role="img" aria-describedby="icon-title" class="icon">
                    <title id="icon-title">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use>
                </svg></a>
        </div>
        <div class="col-12 col-lg-12 p-0 mt-2"><img src="https://tema.unito.it/v3/assets/images/1116x478.jpg"></div>
</div>

Testo e icona

Scuola di Agraria e Medicina Veterinaria - SAMEV

Largo Paolo Braccini, 2, 10095, Grugliasco, TO

Email: direzione.samev@unito.it

Indirizzo di Posta Elettronica Certificata (PEC): samev@pec.unito.it

Direttore/Direttrice: FERROGLIO Ezio

<div class="row paragrafi">
        <h5 class="mb-3">Scuola di Agraria e Medicina Veterinaria - SAMEV</h5>
        <div class="col-12">
            <p class="mb-2 d-flex align-items-center">
                <svg role="img" class="icon icon-sm mr-2" aria-describedby="icon-title">
                    <title id="icon-title">Icon Title</title>
                    <use href="./dist/svg/sprite2024.svg#unito-pin"></use>
                </svg>Largo Paolo Braccini, 2, 10095, Grugliasco, TO</p>
        </div>
        <div class="col-12">
            <p class="mb-2 d-flex align-items-center">
                <svg role="img" aria-describedby="icon-title1" class="icon icon-sm mr-2">
                    <title id="icon-title1">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-mail"></use>
                </svg>Email: <a href="#" class="ms-1">direzione.samev@unito.it</a>
            </p>
        </div>
        <div class="col-12">
            <p class="mb-2 d-flex align-items-center">
                <svg role="img" aria-describedby="icon-title2" class="icon icon-sm mr-2">
                    <title id="icon-title2">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-mail"></use>
                </svg>Indirizzo di Posta Elettronica Certificata (PEC): <a href="#" class="ms-1">samev@pec.unito.it</a>
            </p>
        </div>
        <div class="col-12">
            <p class="mb-2 d-flex align-items-center">
                <svg role="img" aria-describedby="icon-title3" class="icon icon-sm mr-2">
                    <title id="icon-title3">Icon Title</title>
                    <use xlink:href="./dist/svg/sprite.svg#it-user-fill"></use>
                </svg>Direttore/Direttrice: <a href="#" class="ms-1">FERROGLIO Ezio</a>
            </p>
        </div>
</div>

Testo e link card

Titolo

Title card

<div class="row align-items-center paragrafi">
        <div class="col-12 ps-0 pb-xl-3"><h1 class="position-relative">Titolo</h1></div>
        <div class="col-12 col-lg-9 ps-0 pe-0 pb-4 pb-lg-0 ps-lg-0 pe-lg-5">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur. Adipiscing purus venenatis dictum dolor nunc nisl. Ut commodo sit arcu commodo egestas eleifend. Fermentum aliquam turpis nisl. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur. Fermentum aliquam turpis nisl mauris volutpat diam quis bibendum. Massa mauris nisl adipiscing faucibus quis praesent diam quis curabitur.</p>
        </div>
        <div class="col-12 col-lg-3 p-0">
            <div class="card-wrapper base-card flex-column">
                <div class="card card-img no-after">
                    <div class="card-body flex-column pt-0 pb-0 pl-3 pr-3">
                        <div class="col-12 d-flex mt-2 mb-2 align-items-center">
                            <div class="col-10">
                                <h5 class="card-title mb-0"><a href="#" title="lorem ipsum" class="" data-focus-mouse="false">Title card</a></h5>
                            </div>
                            <div class="col-2 d-flex justify-content-end">
                                <a class="read-more" href="#" title="lorem ipsum">
                                    <svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-img no-after mt-4">
                    <div class="card-body flex-column pt-0 pb-0 pl-3 pr-3">
                        <div class="col-12 d-flex mt-2 mb-2 align-items-center">
                            <div class="col-10">
                                <h5 class="card-title mb-0"><a href="#" title="lorem ipsum" class="" data-focus-mouse="false">Title card</a></h5>
                            </div>
                            <div class="col-2 d-flex justify-content-end">
                                <a class="read-more" href="#" title="lorem ipsum">
                                    <svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

Tema Unito v 3 / 3.1

DOCUMENTAZIONE

Paragrafo testo e immagini

Testo e immagine

Titolo

Titolo

Titolo

Titolo

Titolo

Testo e icona

Scuola di Agraria e Medicina Veterinaria - SAMEV

Testo e link card

Titolo

Title card

Title card