Mística CSS
Components
Texts / Titles
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
Text 10
Title 1
Title 2
Title 3
Title 4
TextLink
This is an example of text link inside text2 and this is a disabled text link too. You don't need to add any extra class to <a> elements to make them look like mistica text links, just put the <a> element inside a .mistica-text-X ancestor. For example, this is a text link too.
Boxed
Title
Some text
Tag
FeedbackScreen
Counter
TextFields
TextField
SearchField
Slider
Switch
Checkbox
Without label
With label
Disabled
Lists
RowList
-
Title 1Subtitle 1
-
Title 2Subtitle 2Description 2
-
HeadlineTitle 3Subtitle 3Description 3
BoxedRowList
-
Title 1Subtitle 1
-
Title 2Subtitle 2Description 2
-
HeadlineTitle 3Subtitle 3Description 3
Table
Column headings
| Type of food | Calories | Tasty factor | Price | Average rating |
|---|---|---|---|---|
| Slice of pizza | 285 | 95% | 5,00€ | 9/10 |
| Hamburger | 354 | 90% | 6,00€ | 8/10 |
| Sushi | 200 | 85% | 10,00€ | 10/10 |
| Salad | 150 | 70% | 4,00€ | 7/10 |
| Ice cream | 250 | 95% | 3,00€ | 9/10 |
Row headings
| Sistema operativo y procesador |
Sistema operativo: Android 15 con One UI 7 Procesador: Snapdragon 8 Elite (3nm) - Ray Tracing |
|---|---|
| Conectividad |
5G WiFi 802.11 a/b/g/n/ac/ax 2.4 + 5 + 6 Ghz Bluetooth 5.3 USB type C GPS NFC |
| Características físicas |
Tipo de SIM: Dual SIM (SIM1+SIM2 o eSIM) Dimensiones: 146,9 x 70,5 x 7,2mm Peso: 162 g Colores Disponibles: Gris |
| Pantalla | 6,2" Dynamic AMOLED 2340x1080 FHD+ (1-120 Hz) |
Chip
Breadcrumbs
Buttons
Accordion
Single Open
Accordion title 1
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Accordion title 2
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Accordion title 3
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Multiple Open
Accordion title 1
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Accordion title 2
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Accordion title 3
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Cards
MediaCard / DataCard / SnapCard
Pretitle
Title
Subtitle
Description
Pretitle
Title
Subtitle
Description
Title
Subtitle
Description
Pretitle
Title
Subtitle
Description
Pretitle
Title
Subtitle
Description
Title
Subtitle
Description
Pretitle
Title
Subtitle
Description
Pretitle
Title
Subtitle
Description
Title
Subtitle
Description
NakedCard / SmallNakedCard
Pretitle
Title
Subtitle
Description
Title
Subtitle
Description
DisplayMediaCard / DisplayDataCard
Pretitle
Title
Description
Pretitle
Title
Description