Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Usando la interfaz de usuario semántica, incluso podemos diseñar tarjetas donde el contenido se muestra como en los naipes. La interfaz de usuario semántica ha proporcionado una característica sorprendente en la que podemos mostrar las tarjetas con diferentes contenidos y variaciones. En este artículo, conoceremos el contenido del enlace de la tarjeta, es decir, una tarjeta en la que el contenido que se muestra actuará como enlaces.
El contenido del enlace de la tarjeta de interfaz de usuario semántica proporciona las ofertas para hacer que se pueda hacer clic en el encabezado, el contenido y la imagen tan pronto como alguien haga clic en ellos, la página redirigirá inmediatamente a los enlaces respectivos.
Clase de contenido de enlace de tarjeta de interfaz de usuario semántica: no hay una clase predefinida para esto, solo necesita agregar el contenido en la etiqueta de anclaje con el atributo href válido.
Sintaxis:
<div class="content">
<a class="image" href="">
...
</a>
<a class="header" href="">
...
</a>
<div class="meta">
<a>...</a>
</div>
</div>
Ejemplo: El siguiente código demuestra el uso del contenido del enlace de la tarjeta usando las clases anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 class="header ui green">GeeksforGeeks</h1>
<strong>Semantic UI Card link content</strong>
</center><br>
<div class="ui card">
<a class="image"
href="https://www.geeksforgeeks.org/">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220203170930/logo-200x200.jpg">
</a>
<div class="content">
<a class="header"
href="https://www.geeksforgeeks.org/">
GFG is the best website ever.
</a>
</div>
</div>
</body>
</html>
Producción:
Contenido del enlace de la tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#link
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA