Libreria Elementi
Catalogo completo di tutti i componenti riutilizzabili disponibili nel design system di Auvisa. Ogni elemento è mostrato con un esempio funzionante.
Richiedi Informazioni1. Hero (hero-v1.php)
Sezione hero con titolo, sottotitolo (minimo 15 parole), linea verde e pulsante CTA. Usato in cima a tutte le pagine.
L'hero di questa pagina è un esempio funzionante del componente. Parametri: title, subtitle, cta, ctaHref, ctaClass.
Lo stile (testo a sinistra, underline verde, max-width 720px) è definito in common.css. Il CSS della singola pagina contiene solo il background-image.
2. Article (article-v1.php)
Blocco di testo lungo con heading, sottotitolo, contenuto HTML e immagine opzionale. Sostituisce widget-article, prose, widget-about.
Esempio con heading e contenuto
Questo è un esempio del componente article con un titolo H2 e paragrafi di testo. Supporta qualsiasi contenuto HTML: paragrafi, liste, link, testo in grassetto e corsivo.
Parametri: heading, subheading, content (HTML), image, imageAlt.
Esempio con subheading e immagine
Questo blocco usa un sottotitolo H3 invece del titolo H2, con un'immagine sotto il testo. Utile per sottosezioni all'interno di una sezione più ampia.
Esempio con lista
Il contenuto può includere liste con bullet verdi automatici:
- Primo elemento della lista con testo evidenziato
- Secondo elemento con descrizione più lunga
- Terzo elemento della lista
3. Card Verticale — Esempio Destinazione (card-vertical-v1.php)
Card con immagine, titolo, testo e link opzionale. Usata nella pagina guida-australia per le destinazioni.
4. Card Verticale — Esempio Fund (card-vertical-v1.php)
Card con badge, titolo, testo e pulsante CTA. Usata per elenchi di visti e servizi.
eVisitor
Visto elettronico gratuito per cittadini europei. Validità 12 mesi, permanenza massima 90 giorni.
Richiedi InformazioniVisitor Visa
Visto a pagamento per tutte le nazionalità. Permanenza fino a 12 mesi per ingresso.
Richiedi InformazioniWorking Holiday
Visto per giovani 18-35 anni. Lavoro, studio e viaggio fino a 12 mesi.
Richiedi Informazioni5. Card Prezzo (card-price-v1.php)
Card con prezzo evidenziato, lista feature e pulsante. Usata per listini prezzi.
eVisitor
per viaggiatore
- Fino a 90 giorni per visita
- Ingressi multipli 12 mesi
- Rilascio in 24 ore
Visitor Visa
prima dell'ingresso
- 3, 6 o 12 mesi di soggiorno
- Turismo, famiglia o affari
- Prolungabile sul posto
Working Holiday
18–35 anni
- Fino a 12 mesi in Australia
- Studio, lavoro e vacanza
- 2° WHV disponibile
6. Card Verticale — Esempio Step (card-vertical-v1.php)
Card con icona SVG, titolo e descrizione. Usata per processi a passaggi numerati.
Compila il modulo
Inserisci i tuoi dati e il numero di passaporto nel modulo online.
Pagamento sicuro
Paga con carta di credito o PayPal in modo sicuro e protetto.
Ricevi il visto
Il visto approvato arriva via email entro 24 ore.
7. Card Verticale — Esempio Service (card-vertical-v1.php)
Card con titolo, descrizione e pulsante CTA. Senza immagine o icona.
Assistenza Visto Completa
Il nostro team verifica la documentazione, compila la domanda e la invia al Dipartimento di Immigrazione per tuo conto.
Richiedi Informazioni8. Card Orizzontale — Esempio Visa Type (card-horizontal-v1.php)
Card con bordo laterale, titolo e descrizione. Usata per elencare tipologie di visto o informazioni strutturate.
eVisitor – Sottoclasse 651
Visto gratuito per cittadini europei. Validità 12 mesi, permanenza massima 3 mesi.
Visitor Visa – Sottoclasse 600
Visto a pagamento per tutte le nazionalità. Permanenza da 3 a 12 mesi.
9. Card Orizzontale — Esempio Benefit (card-horizontal-v1.php)
Card orizzontale con icona e testo. Usata per elenchi di vantaggi.
Soggiornare in Australia per 12 mesi
Lavorare in diversi settori (full-time, part-time, stage)
10. Card Verticale — Esempio Default (card-vertical-v1.php)
Card con immagine, titolo e testo. Opzionalmente cliccabile con parametro link.
Articolo correlato
Descrizione breve dell'articolo con link cliccabile.
Senza link
Questa card non ha il parametro link, quindi non è cliccabile.
11. Accordion (accordion-v1.php)
Accordion con apertura/chiusura animata. Un solo item aperto alla volta. Usato per FAQ e sezioni espandibili.
L'accordion mostra una lista di domande. Cliccando su una domanda, la risposta si espande con un'animazione fluida. Se un altro item è già aperto, si chiude automaticamente.
Il componente accetta un array items, dove ogni item ha: question (testo della domanda), answer (HTML della risposta), active (bool, opzionale, per aprire l'item di default).
Sì, il parametro answer accetta qualsiasi contenuto HTML: paragrafi, liste, immagini, card e altri componenti annidati.
- Esempio di lista dentro l'accordion
- Secondo elemento della lista
12. Callout (callout-v1.php)
Box evidenziato con 4 varianti: info (blu), warning (giallo), tips (checklist), price (prezzo centrato).
Tipo: info
Informazione importante
Questo è un callout di tipo info con bordo laterale blu. Usato per informazioni generali, disclaimer e note.
Tipo: warning
Attenzione
Questo è un callout di tipo warning con bordo laterale giallo. Usato per avvisi importanti e novità normative.
Tipo: tips
Consigli utili prima di partire
- Richiedi il visto con almeno 2 settimane di anticipo.
- Verifica che il passaporto sia valido per almeno 6 mesi.
- Conserva la conferma email del visto.
Tipo: price
13. CTA Banner (cta-banner-v1.php)
Banner full-width con sfondo blu, titolo, testo e pulsante bianco. Usato prima del footer su quasi tutte le pagine.
14. Feature Cards (common.css)
Card con icona SVG, titolo e testo. Definite in common.css, usate inline. Supportano griglia a 3 o 5 colonne.
Rapido
Elaborazione in meno di 24 ore nella maggior parte dei casi.
Supporto 24h
Assistenza disponibile in qualsiasi momento via email.
Sicuro
Pagamento protetto con carta di credito o PayPal.