Skip to content

Commit c54ea32

Browse files
astagiastagi
committed
chore: update documentation
1 parent 50b9f5e commit c54ea32

File tree

1 file changed

+7
-143
lines changed

1 file changed

+7
-143
lines changed

‎stories/Documentation/Card.mdx‎

Lines changed: 7 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
22
import {
3-
Card,
4-
CardBody,
5-
CardCategory,
6-
CardReadMore,
7-
CardSignature,
8-
CardTag,
9-
CardTagsHeader,
10-
CardText,
11-
CardTitle
3+
Card
124
} from '../../src';
135
import * as CardStories from '../Components/Card.stories';
146

@@ -18,10 +10,10 @@ import * as CardStories from '../Components/Card.stories';
1810

1911
## Un contenitore di testi e immagini con molte opzioni e varianti.
2012

21-
Le _card_ sono contenitori flessibili ed estendibili. Costruite con flexbox, offrono un facile posizionamento nella
22-
griglia e si combinano bene con altri componenti.
23-
24-
Di default le card occupano l'intero spazio orizzontale del loro elemento contenitore.
13+
Le _card_ sono contenitori flessibili ed estendibili. Rispetto alla precedente versione
14+
le nuove Card del Design Kit di React sono costituite dal solo componente `Card`
15+
in modo tale da lasciare l'utente libero nelle personalizzazioni all'interno del
16+
componente.
2517

2618
## Card semplice
2719

@@ -37,142 +29,14 @@ Esempi con descrizione e data di pubblicazione della scheda, con categoria oppur
3729

3830
<Canvas of={CardStories.EditorialStandard} />
3931

40-
### Card Articolo semplice
41-
42-
Esempio di card contenente categorizzazione e data, firma dell’articolo e link all’articolo.
43-
Per inserire la categorizzazione e/o la data di pubblicazione, usare il componente `CardCategory` ed inserire al suo
44-
interno gli elementi come da esempio.
45-
La categoria nell’esempio seguente è un link, ma potrebbe essere un testo semplice senza link, utilizzando il tag
46-
`<span/>` invece del tag di default (`<a/>`).
47-
48-
<Canvas of={CardStories.SimpleArticle} />
49-
50-
### Card con icona
51-
52-
Esempio di card contenente categorizzazione e icona.
53-
Per inserire la categorizzazione con relativa icona, passare al componente `CardCategory` la proprietà `iconName` con
54-
l'identificativo dell'icona da utilizzare.
55-
56-
<Canvas of={CardStories.CardIcon} />
57-
58-
Un’altro esempio di card contenente intestazione (in questo caso numero di files presenti) e icona: la struttura è
59-
uguale alla card precedente, per l’intestazione è sufficiente usare l’elemento `.categoryicon-top` ed inserire al suo
60-
interno gli elementi come da esempio.
61-
62-
Nell’esempio seguente sono stati inseriti un sottotitolo ed un link semplice che segue il paragrafo. Per i sottotitoli
63-
utilizzare il tag `<h6/>`, per i link semplici utilizzare la classe .simple-link.
64-
65-
<Canvas of={CardStories.CardIconAdvanced} />
66-
67-
## Card con ombreggiatura
68-
69-
Le card con ombreggiatura sono caratterizzate dagli attributi:
70-
71-
- `spacing`: utilizzata nel componente `Card` serve a distanziare le card nella loro versione mobile.
72-
- La classe `.card-bg`: utilizzata nel componente `Card` serve a creare background e ombra della card.
73-
74-
<Canvas of={CardStories.CardWithShading} />
75-
76-
### Card grande
77-
78-
Le card con ombreggiatura grandi sono caratterizzate dalle classi:
79-
80-
- `.card-bg`: utilizzata nel componente `Card` serve a creare background e ombra della card.
81-
- `.card-big`: utilizzata nel componente `Card` serve a al dimensionamento dei suoi contenuti.
82-
83-
Nell’esempio seguente è stata inserita un icona grande prima del titolo della card, il div contenente l’icona è di
84-
classe `.top-icon`.
85-
86-
#### Esempio 1:
87-
88-
<Canvas of={CardStories.BigCard} />
89-
90-
L’esempio seguente contiene una icona custom (non SVG ma CSS) ed una categorizzazione con icona SVG.
91-
L’icona custom viene creata dal div `.flag-icon`.
92-
La categorizzazione dal div con classe `.etichetta`.
93-
Per creare un bordo di colore primario a chiusura card, potete utilizzare la classe `.border-bottom-card` applicata al
94-
componente `Card`.
95-
96-
#### Esempio 2:
97-
98-
<Canvas of={CardStories.BigCardExampleTwo} />
99-
100-
## Card grande con tag, data e call to action
101-
102-
Per inserire tags e/o data in testa alla card utilizzare l’elemento: `CardTagsHeader`.
103-
Per inserire il pulsante a fondo card, utilizzare l’elemento: `.it-card-footer`. Nell’esempio seguente sono state
104-
inserite firma e pulsante nel footer della card.
105-
Utilizzate la classe `.no-after` applicata al componente `Card` se volete ridurre lo spazio inferiore del componente.
106-
107-
<Canvas of={CardStories.BigCardWithTag} />
108-
109-
## Card con immagine
32+
## Altre varianti di Card
11033

111-
La card con immagine è contraddistinta dalla classe `.card-img` applicata al componente `Card`.
112-
113-
L’elemento immagine è `.img-responsive-wrapper` per proporzioni dell’immagine pari a circa 31:19; se associato alla
114-
classe `.img-responsive-panoramic` l’ottimo è 62:19. Si consiglia in ogni caso un'immagine orizzontale.
115-
Qualora le proporzioni non fossero esatte, l’immagine occuperà il massimo dell’altezza o della larghezza disponibile
116-
escludendo il resto dell’immagine e centrandola nell’elemento.
117-
118-
È anche possibile aggiungere un piccolo box con l’indicazione della data, per card di tipo evento.
119-
120-
<Canvas of={CardStories.CardsWithImages} />
121-
122-
## Card speciali
123-
124-
La card speciale è contraddistinta dalla classe `.special-card` applicata al componente `Card`.
125-
Tutta la card è un link al relativo contenuto - notare il `tag="a"`. Le proporzioni ottimali dell’immagine per questa
126-
card sono 17:21.
127-
128-
<Canvas of={CardStories.SpecialCard} />
129-
130-
## Card teaser
131-
132-
Per creare Card con contenuti brevi o di “anteprima” è sufficiente aggiungere l'attributo `teaser` al componente `Card`.
133-
134-
Come per ogni elemento, è possibile aggiungere le classi `.rounded` o `.shadow` per aggiungere bordi, effetti di arrotondamento o ombreggiatura.
135-
136-
<Canvas of={CardStories.SimpleCardTeaser} />
137-
138-
In alcuni casi può essere necessario raccogliere più card teasers all'interno dello stesso componente contenitore. Per questo motivo è disponibile l'attributo `noWrapper` per disabilitare il wrapper automatico del componente al fine di gestirne la composizione in modo più granulare:
139-
140-
<Canvas of={CardStories.CardTeaserMultiple} />
34+
Per tutti gli altri esempi seguire la documentazione ufficiale di [Bootstrap Italia](https://italia.github.io/bootstrap-italia/docs/componenti/card/).
14135

14236
## Argomenti componente
14337

14438
## Card
14539

14640
<ArgTypes of={Card} />
14741

148-
### CardBody
149-
150-
<ArgTypes of={CardBody} />
151-
152-
### CardTitle
153-
154-
<ArgTypes of={CardTitle} />
155-
156-
### CardText
157-
158-
<ArgTypes of={CardText} />
159-
160-
### CardCategory
161-
162-
<ArgTypes of={CardCategory} />
163-
164-
### CardSignature
165-
166-
<ArgTypes of={CardSignature} />
167-
168-
### CardReadMore
169-
170-
<ArgTypes of={CardReadMore} />
171-
172-
### CardTagsHeader
173-
174-
<ArgTypes of={CardTagsHeader} />
175-
176-
### CardTag
17742

178-
<ArgTypes of={CardTag} />

0 commit comments

Comments
 (0)