ENISA Design System is a library that houses a collection of reusable web components, along with their code, to create a fast, robust, and consistent product. It serves as the foundation of our product and ensures that the entire team is aligned in their efforts. The ENISA Design System is not static but dynamic, and it expands as the product grows.
CARDS
<h3><a href="{{ view_node }} " title='Access to '>{{ title }}</a></h3>
<p class="metadata">
<span class="date">{{ field_effective }}</span>
<span class="download"><a href="{{ field_media_file }} " title='Download file: {{ title }}'>Download</a></span>
</p>
<div class="related-topics">
{{ field_topics }}
</div>
<div class="content">
{{ body }}
</div>Best practices
Las cards deben estar incluidas en un wrapper con la class enisa-cards-wrapper.
A esta capa contenedora se le pueden concatenar las siguientes clases segun como queremos que se muestren las cards.
- horizontal
- col1x, col2x, col3x, col4x
- blue-card
- with-arrow
View:
CSS class:enisa-cards-wrapper blue-card with-arrow
Unformatted list: Row-class: item-card enisa-card
Examples
FEATURED
View:
CSS class:featured-component
Unformatted list: Row-class: featured-items
<div class="featured-image">{{ field_image }}</div>
<div class="featured-content">
<h3>{{ title }}</h3>
<p class="metadata">
<span class="date">{{ field_effective }}</span>
</p>
<div class="content">{{ field_description }}</div>
<div class="related-topics">
{{ field_topics }}
</div>
</div>