HomeComponents

Content Card

Basic (1x1)

Default
With image (background)
Introducing
Refinitiv Regulatory Intelligence
Financial & Risk
Introducing
Refinitiv Regulatory Intelligence
Link
<!-- the whole content card CAN be a clickable anchor link -->
<!-- if a card is NOT a link, replace <a> with a <div> and remove the "href" and "target" -->
<a class="ui-content-card" href="..." target="...">
  <div class="ui-content-card__body">

    <!-- card image - OPTIONAL -->
    <!-- if card doesn't have image, remove this div -->
    <!-- image src must be defined inline from AEM -->
    <div class="ui-content-card__image" style="background-image: url(https://path/to/image)"></div>

    <!-- card content -->
    <div class="ui-content-card__content">
      <div class="ui-eyebrow ui-eyebrow--primary">...</div>
      <div class="ui-heading ui-heading--sm ui-heading--sm--bold">...</div>
    </div>

    <!-- card footer - can be a link or meta data -->
    <div class="ui-content-card__footer">
      <div class="ui-meta-data">...</div>
    </div>
  </div>
</a>

Horizontal (2x1)

Default
With image (split)
Introducing
Refinitiv Regulatory Intelligence
Financial & Risk
Introducing
Refinitiv Regulatory Intelligence
Video · 6 min
<!-- horizontal with image (background) -->
<div class="ui-content-card ui-content-card--horizontal">
  <div class="ui-content-card__body">...</div>
</div>

<!-- horizontal with image (split) and link -->
<a class="ui-content-card ui-content-card--horizontal ui-content-card--split" href="..." target="...">
  <div class="ui-content-card__image" style="..."></div>
  <div class="ui-content-card__body">...</div>
</a>

Vertical (1x2)

Default
With image (split)
With image (background)
Introducing
Refinitiv Regulatory Intelligence
Financial & Risk
Introducing
Refinitiv Regulatory Intelligence
Link
Introducing
Refinitiv Regulatory Intelligence
Video · 6 min
<!-- vertical -->
<div class="ui-content-card ui-content-card--vertical">
  <div class="ui-content-card__body">...</div>
</div>

<!-- vertical with image (split) and link -->
<a class="ui-content-card ui-content-card--vertical ui-content-card--split" href="..." target="...">
  <div class="ui-content-card__image" style="..."></div>
  <div class="ui-content-card__body">...</div>
</a>

<!-- vertical with image (background) and link -->
<a class="ui-content-card ui-content-card--vertical" href="..." target="...">
  <div class="ui-content-card__image" style="..."></div>
  <div class="ui-content-card__body">...</div>
</a>

Vertical detailed (1x2)

With icon and description
With image (split)
Promo
Introducing
Refinitiv Regulatory Intelligence
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores atque beatae corporis distinctio dolor doloribus, facere itaque iusto maiores necessitatibus nesciunt non nulla officiis quae qui, quisquam quod reiciendis.
Financial & Risk
Introducing
Refinitiv Regulatory Intelligence
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid animi asperiores assumenda.
Video · 6 min
Introducing
Refinitiv Regulatory Intelligence
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid animi asperiores assumenda.
Link
<!-- vertical detailed -->
<div class="ui-content-card">
  <div class="ui-content-card__body">
    <div class="ui-content-card__content">

      <!-- optional icon and paragraph inside card content -->
      <i class="ui-icon ui-icon--reports ui-icon--primary"></i>
      <div class="ui-eyebrow ui-eyebrow--primary">...</div>
      <div class="ui-heading ui-heading--xs ui-heading--xs--bold">...</div>
      <div class="ui-paragraph ui-paragraph--md">...</div>
    </div>

    <div class="ui-content-card__footer">...</div>
  </div>
</div>
Refinitiv © 2020