# Sistema de diseño Fomantic UI ## Vista previa de la interfaz del sistema de diseño Fomantic UI Filtra tres propuestas de lectura originales, valóralas con estrellas o las teclas de flecha y guarda una lista para debatir. ## Referencia de diseño del sistema de diseño Fomantic UI Fomantic UI 2.9.4 compilado CSS inspeccionado directamente. Estos son valores predeterminados a nivel de selector del tema basado en Less, no tokens CSS de ejecución inventados. Los colores originales de las cubiertas y las dimensiones de la aplicación se identifican por separado. ### Tipografía predeterminada del sitio | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | html font-size | 14px | Tamaño de referencia predeterminado de rem. | | body font-family | Lato, system-ui, platform and emoji fallbacks | La vista previa incluye datos locales de la fuente Lato. | | body line-height | 1.4285em | Unos 20px con el tamaño de texto predeterminado de 14px. | | body text color | rgba(0, 0, 0, 0.87) | Texto predeterminado de énfasis alto. | | h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Tamaños de encabezado predeterminados antes de las anulaciones de la página original. | | heading line-height | 1.28571429em | Ritmo predeterminado de los encabezados. | ### Botones predeterminados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | .ui.button background | #e0e1e2 | Botón predeterminado neutro. | | .ui.button border-radius | 0.28571429rem | Aproximadamente 4px con el tamaño raíz predeterminado. | | .ui.teal.button background | #00b5ad | Color de acción verde azulado nativo usado en la lista de selección. | | .ui.teal.button:hover | #009c95 | Estado de desplazamiento del verde azulado nativo. | | .ui.teal.button:focus | #008c86 | Fondo nativo de enfoque verde azulado. | | .ui.teal.button:active | #00827c | Fondo presionado del verde azulado nativo. | | .ui.primary.button background | #2185d0 | El azul primario es independiente de la variante verde azulado con nombre propio. | ### Geometría predeterminada de las tarjetas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | .ui.card width | 290px | Ancho fijo predeterminado; la variante fluida ocupa esta cuadrícula de la aplicación. | | .ui.card border-radius | 0.28571429rem | Aproximadamente 4px con el tamaño raíz predeterminado. | | .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Elevación y contorno predeterminados. | | .ui.card margin | 1em 0 | La cuadrícula original anula el valor con cero para alinear las tarjetas. | | .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Movimiento predeterminado de las tarjetas. | ### Configuración de la valoración | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | maxRating | 4 by default; 5 in this example | La escala explícita de cinco puntos coincide con el valor máximo del control deslizante accesible. | | initialRating | 0 | Sin valorar antes de la interacción del usuario. | | clearable | auto by default; true in this example | Permite borrar una valoración existente. | | interactive | true | La interacción con el ratón está habilitada. | | onRate(value) | Callback after a rating is selected | Sincroniza el texto mostrado y el valor accesible. | ### Escala original de la sala de lectura | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Page padding | 36px 28px / 24px 18px mobile | Espaciado del diseño original. | | Grid gap | 22px | Estantería de lectura original de tres columnas. | | Page heading | 34px / 1.15; 29px mobile | Anulación original del encabezado. | | Cover height | 175px / 155px mobile | Ilustración original de la cubierta del libro CSS. | | Layout breakpoint | 760px | Cambio original a una sola columna de tarjetas. | ## Guía completa del sistema de diseño de Fomantic UI Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Fomantic UI: un vocabulario CSS con módulos de jQuery ### Un vocabulario de CSS con módulos de jQuery > Fomantic UI combina cadenas de clases semánticas con módulos con estado opcionales. La estantería de lectura usa ui fluid card, ui teal button y ui basic label para su aspecto. El menú desplegable y las valoraciones se inicializan explícitamente mediante jQuery. Cargar solo la hoja de estilos mostraría las tarjetas, pero no proporcionaría la misma interacción. Este ejemplo fija Fomantic UI 2.9.4 y jQuery 3.7.1. Incluye el módulo de transición antes del menú desplegable y, después, el de valoración. Mostrar estas dependencias es más útil que presentar una fila de estrellas estática y llamarla ejemplo de biblioteca interactiva. El módulo de la aplicación original se ejecuta solo cuando ya existe el marcado de las tarjetas. Consulta la especificación complementaria ## Los valores predeterminados compilados del sistema de diseño de Fomantic UI no son nombres de tokens de ejecución ### Los valores predeterminados compilados no son nombres de tokens en tiempo de ejecución El tema predeterminado de Fomantic se crea con Less. Por eso, la referencia registra valores reales de selectores, como el fondo del botón verde azulado y el radio del borde de la tarjeta. No inventa un token --fomantic-primary API que el paquete compilado no expone. Para realizar cambios más amplios en el tema, deben usarse los archivos de variables y de compilación del tema documentados. La variante verde azulado con nombre propio es independiente de la variante azul primario. En esta estantería de lectura, la acción para añadir a la lista de selección es verde azulado, mientras que las ilustraciones originales de las cubiertas usan colores de papel, salvia y arcilla cálida. Esas cubiertas son ilustraciones de la aplicación, no muestras oficiales de la paleta. Los valores de desplazamiento, enfoque y estado presionado de los botones siguen siendo los valores predeterminados nativos de Fomantic. Consulta la especificación complementaria ## El tamaño de rem de catorce píxeles cambia la geometría del sistema de diseño de Fomantic UI ### Los rem de catorce píxeles cambian la geometría La hoja de estilos predeterminada del sitio establece en catorce píxeles el tamaño raíz y el texto del cuerpo. Por eso, el radio de 0.28571429rem de los botones y las tarjetas equivale aproximadamente a cuatro píxeles. Copiar ese valor en rem a una raíz distinta de dieciséis píxeles produciría una geometría diferente; por eso, la referencia incluye el tamaño raíz en lugar de indicar solo un radio sin contexto. Lato es la familia tipográfica preferida y el paquete compilado incluye recursos de fuentes locales. Esta vista previa independiente incorpora esos recursos en lugar de solicitarlos a un servicio de fuentes web. El encabezado de la página es una anulación original de treinta y cuatro píxeles; las descripciones de las tarjetas conservan un texto compacto de cuerpo con un interlineado más amplio, propio de la aplicación. Consulta la especificación complementaria ## La anatomía de las tarjetas del sistema de diseño de Fomantic UI separa el contenido de las acciones ### La estructura de las tarjetas mantiene separados el contenido y las acciones Cada tarjeta nativa contiene una cubierta decorativa, un bloque de contenido para el tema y la descripción, otro bloque para la valoración y un bloque adicional para la acción de añadir a la lista de selección. Las tarjetas fluidas ocupan la cuadrícula original de tres columnas en vez de usar el ancho predeterminado de 290px del paquete. La página elimina los márgenes de cada tarjeta para que la cuadrícula proporcione separaciones uniformes. Las consignas proponen distintas tareas de lectura: comparar el espaciado entre letras, quitar un elemento para estudiar el espacio negativo y observar cambios de color según el contexto. Sus cubiertas hacen eco visual de esos ejercicios con tipografía, rectángulos y colores superpuestos. Se trata explícitamente de consignas originales y no implican el respaldo de ninguna editorial. Consulta la especificación complementaria ## Invoca el comportamiento nativo de valoración para cada tipo de entrada en el sistema de diseño de Fomantic UI ### Usa el comportamiento nativo de valoración en todas las vías de entrada El módulo de valoración se configura con un máximo de cinco y la opción clearable en true. onRate recibe el valor numérico actual y sincroniza tanto la puntuación visible como el valor accesible del control deslizante. La acción Borrar valoración invoca el comportamiento clear rating del módulo en vez de eliminar las clases activas manualmente. El módulo nativo de estrellas permite la interacción con el ratón, pero este ejemplo también añade un comportamiento explícito para el teclado. El contenedor de la valoración es un control deslizante etiquetado con un rango de cero a cinco. Las teclas de flecha cambian el valor en un punto; Inicio borra la valoración y Fin selecciona cinco. Cada método invoca set rating para garantizar que las estrellas mostradas y la salida de la aplicación compartan el mismo estado del módulo. 1. Ve a una valoración con el tabulador y pulsa la flecha derecha dos veces para seleccionar dos de cinco. 2. Pulsa Fin para seleccionar cinco y luego Inicio para volver a Sin valorar. 3. Haz clic en una estrella y comprueba que la salida de texto y el valor accesible se actualicen juntos. Consulta la especificación complementaria ## El filtrado del menú desplegable conserva el estado oculto en el sistema de diseño de Fomantic UI ### El filtrado del menú desplegable conserva el estado oculto El selector de temas se convierte en un menú desplegable nativo de Fomantic mediante el inicializador dropdown. Su función de retorno onChange oculta las tarjetas cuyo tema no coincide con el valor seleccionado y actualiza el recuento de consignas visibles. La opción Todos los temas restaura la estantería completa. El componente usa el módulo de transición para animar el movimiento del menú. El filtrado no destruye ni vuelve a crear una tarjeta. Las valoraciones existentes y la pertenencia a la lista de selección permanecen asociadas a sus registros originales mientras están ocultos. Es intencional: acotar la estantería es una operación de visualización, no una solicitud para borrar las elecciones anteriores del usuario. Por eso, el resumen puede mencionar un elemento que no esté incluido en el filtro actual. Consulta la especificación complementaria ## Sistema de diseño Fomantic UI: una lista de preselección es independiente de la valoración ### Una lista de preselección es independiente de una valoración La valoración expresa el interés en una escala de cero a cinco, mientras que formar parte de la lista de preselección es una decisión independiente de sí o no. El usuario puede guardar una propuesta para comentarla antes de valorarla. El botón de la lista de preselección comunica su estado seleccionado mediante aria-pressed y alterna las etiquetas Añadir y Quitar. El resumen obtiene los nombres de un Set de identificadores de tema estables. La región de estado describe las propuestas seleccionadas sin afirmar que la colección se haya guardado de forma remota. Al recargar el navegador, este ejemplo se borra. Una lista de lectura compartida real necesitaría persistencia, identidad de usuario y gestión de conflictos; esas capacidades no se consiguen añadiendo una clase a una tarjeta. Consulta la especificación complementaria ## Sistema de diseño Fomantic UI: conserva el significado numérico más allá de las estrellas decorativas ### Conserva el significado numérico más allá de las estrellas decorativas Los iconos de estrella se ocultan a las tecnologías de asistencia porque el control deslizante principal expone el valor numérico y la etiqueta. Un resultado visible de Sin valorar o con una fracción comunica lo mismo sin que el lector tenga que contar los iconos coloreados. Un contorno visible al enfocar marca el control deslizante activo, y el botón Borrar devuelve el foco a ese control. Las formas de las portadas también son decorativas. El título, la duración y la descripción reales de cada propuesta se mantienen como texto dentro de la tarjeta. En pantallas estrechas, las tarjetas se apilan en el punto de ruptura original de 760px. El ejemplo restablece a auto la altura del área de visualización compilada del body y desactiva el desbordamiento horizontal oculto para que la inserción use la altura real del contenido y no oculte defectos de diseño. - Muestra el número actual tanto en texto como en un valor accesible. - Usa botones nativos para borrar y modificar la lista de preselección. - Conserva las etiquetas y las descripciones completas cuando la cuadrícula pase a una sola columna. Consulta la especificación complementaria ## Sistema de diseño Fomantic UI: distribuye las fuentes junto a los estilos o inclúyelas en el paquete ### Incluye las fuentes junto con las hojas de estilo o empaquétalas en un solo archivo En un proyecto normal, copia el directorio completo fomantic-ui-css en lugar de extraer semantic.css y olvidar los recursos de themes. Los estilos compilados hacen referencia a los archivos de fuentes Lato e icon mediante rutas relativas. La configuración siguiente conserva esas rutas y carga jQuery antes que los módulos del paquete. La vista previa local usa solo los estilos y scripts necesarios de los componentes y luego integra en un único documento los recursos a los que hacen referencia. No realiza solicitudes externas de fuentes. Es posible que las herramientas de compilación de producción procesen estos recursos de otra manera, pero hay que probar la ruta de las fuentes y el orden de los módulos en la página entregada, no dar por hecho que funcionan porque npm install se haya completado correctamente. Consulta la especificación complementaria ## Sistema de diseño Fomantic UI: ejemplos de componentes ### Estantería de lectura con tres tarjetas Tarjetas nativas, etiquetas, botones, marcado de menús desplegables y contenedores de valoración. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` Referencia de código - Son propuestas originales para el ejercicio, no portadas de libros reales. - Cada valoración tiene su propia etiqueta accesible y su rango numérico. - Las acciones de la lista de preselección exponen aria-pressed. ### Inicialización de módulos e interacción local Filtrado con menú desplegable, comportamiento de la valoración, mejoras para el teclado y estado de la lista de preselección. ``` const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set(); $('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}}); const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));}); $('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};}); cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};}); ``` Referencia de código - jQuery y los módulos de Fomantic deben cargarse antes que este archivo. - Para los cambios con las teclas de flecha se usa el mismo método set rating. - El filtrado oculta las tarjetas sin eliminar sus valoraciones ni selecciones. ### Composición original de la estantería Cuadrícula adaptable, ilustraciones de portada y tratamiento explícito del foco. ``` body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}} html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible} ``` Referencia de código - El valor predeterminado compilado del sitio height:100% se restablece a auto para la inserción. - No se usa el desbordamiento del body para ocultar errores de diseño. ## Sistema de diseño Fomantic UI Configuración del agente de diseño ### Punto de partida para la implementación Verificado con Fomantic UI 2.9.4 y jQuery 3.7.1. El ejemplo independiente integra los recursos de fuentes necesarios; la configuración normal conserva las rutas relativas al paquete. El contenedor HTML incluye todo el marcado del body; guarda los ejemplos proporcionados de interacción y CSS con los nombres de archivo indicados aquí. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` ### Una instrucción para tu proyecto ``` Amplía la lista de preselección de la sala de lectura de Fomantic UI 2.9.4 mediante la inicialización de módulos de jQuery y los componentes Dropdown y Rating proporcionados. Mantén conectadas a las tarjetas visibles las tres propuestas de lectura, sus estados de valoración y el comportamiento local de la lista de preselección. Conserva la compatibilidad explícita con el teclado y la semántica de control deslizante añadidas al control de valoración, junto con los recursos correspondientes del tema y los iconos. La lista de preselección debe impedir las adiciones duplicadas y mostrar claramente su contenido actual; no es un flujo de trabajo de tickets de soporte ni un servicio remoto de recomendaciones. ``` ## Fomantic UI Fuentes y alcance del sistema de diseño Fomantic UI 2.9.4 con jQuery 3.7.1. Los valores del tema son los predeterminados compilados; se identifican las ilustraciones originales de portada y las mejoras para el teclado. Todas las selecciones permanecen en local. - Primeros pasos Recursos compilados e inicialización de módulos. - Tematización Personalización del tema basada en Less. - Sitio Tipografía global y valores predeterminados de la página. - Tarjeta Estructura del contenido y variantes de las tarjetas. - Valoración Métodos de valoración y callback onRate. - Menú desplegable Inicialización de la selección y gestión de cambios. - Button Variantes y estados nativos con nombre. ## Fomantic UI Recursos relacionados del sistema de diseño ### Foundation Un espacio de trabajo funcional de comprobación de Foundation que utiliza XY Grid, validadores personalizados de Abide, confirmación de Reveal, ajustes Sass reales y código completo de integración local. ### Framework7 Un cuaderno de bocetos nativo de Framework7 con acciones swipeout reales, valores explícitos del tema de iOS, un activador de acciones accesible mediante teclado y una lista filtrada que conserva los estudios completados hasta que se restablece. ### gluestack UI Crea una lista de verificación para un kit de campo con los creadores reales de Button e Input de gluestack, colores semánticos explícitos de v5 y el código fuente completo de React Native Web. Examina la validación, las acciones de teclado, la identidad estable de los elementos y el progreso de preparación calculado localmente. - [Referencia de implementación](https://fomantic-ui.com/modules/rating.html) - [Fuente](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css) - [Fuente](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css) - [Fuente](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css) - [Fuente](https://fomantic-ui.com/modules/rating.html) - [Fuente](https://fomantic-ui.com/usage/layout.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/introduction/getting-started.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/usage/theming.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/globals/site.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/views/card.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/modules/rating.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/modules/dropdown.html) - [Consulta la especificación complementaria](https://fomantic-ui.com/elements/button.html) - [Referencia de código](https://fomantic-ui.com/views/card.html) - [Referencia de código](https://fomantic-ui.com/modules/rating.html) - [Referencia de código](https://fomantic-ui.com/usage/layout.html) - [Primeros pasos Recursos compilados e inicialización de módulos.](https://fomantic-ui.com/introduction/getting-started.html) - [Tematización Personalización del tema basada en Less.](https://fomantic-ui.com/usage/theming.html) - [Sitio Tipografía global y valores predeterminados de la página.](https://fomantic-ui.com/globals/site.html) - [Tarjeta Estructura del contenido y variantes de las tarjetas.](https://fomantic-ui.com/views/card.html) - [Valoración Métodos de valoración y callback onRate.](https://fomantic-ui.com/modules/rating.html) - [Menú desplegable Inicialización de la selección y gestión de cambios.](https://fomantic-ui.com/modules/dropdown.html) - [Button Variantes y estados nativos con nombre.](https://fomantic-ui.com/elements/button.html)