Card

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Card Title

Fitch Ratings-London-30 January 2019: The outlook for the global steel sector is stable in 2019, Fitch Ratings says. Chinese export restraint is a key support for the sector in the face of rising output elsewhere, which, combined with lower...

Card Title

Card Title

Card Title

Code

HTML Twig CSS SCSS

<div class="card">
    <div class="image-wrapper">
        <img src="/sites/default/files/page-header/5199033681_d9c80c504f_k.jpg" width="1377" height="918" alt="" loading="lazy" typeof="foaf:Image">
    </div>
    <div class="content">
        <h4 class="heading--5">Card Title</h4>

        <p>
            Fitch Ratings-London-30 January 2019: The outlook for the global steel sector is stable in 2019, Fitch
            Ratings says. Chinese export restraint is a key support for the sector in the face of rising output
            elsewhere, which, combined with lower...
        </p>
    </div>
    <a class="fill--link" href="/card" title="/card"></a>
</div>

{{ attach_library('fitch_master/card') }}
{%
set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %} 
    <div class="card">
        <div class="image-wrapper">
            {{ content.field_image }}
        </div>        
        <div class="content">
            <h4 class="heading--5">{{ content.field_title }}</h4>                
            {% include '@fitch_master/paragraph/paragraph--text.html.twig' %}
        </div>
        {% if content.field_link.0['#url'] is not empty %}
        <a
            class="fill--link"
            href="{{ content.field_link.0['#url'] }}"
            {% if content.field_link.0['#title'] is not empty %}
            title="{{ content.field_link.0['#title'] }}" {% endif %}
        ></a>
        {% endif %}
    </div>
  {% endblock paragraph %}

.card {
  position: relative;
  height: 100%;
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  text-align: center;
  border: 0.1rem solid var(--border-color);
  border-radius: .6rem;
  transition: all 360ms ease;
  overflow: hidden;
}

.card .image-wrapper {
  margin-bottom: var(--spacing-3);
}

.card .content {
  padding: 0 var(--spacing-2);
}

.card {
  position: relative;
  height: 100%;
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  text-align: center;
  border: 0.1rem solid var(--border-color);
  border-radius: .6rem;
  transition: all 360ms ease;
  overflow: hidden;

  .image-wrapper {
    margin-bottom: var(--spacing-3);
  }

  .content {
    padding: 0 var(--spacing-2);
  }
}

Design Files

Figma

Fields

Label	Machine name	Field type	Character Limit	Required
Image	field_image	Image	N/A	Yes
Link	field_link	Link	N/A	No
Text	field_text	Text (formatted, long)	TBC	Yes
Title	field_title	Text (formatted)	TBC	No

Use Case

The card component can be used for any promotional content and has a character limit of 250.

Component Options

There are no options for this component.

Component

Image

Title

Text

Link