CTA card

DEPRECATED – will be removed with version 6.0.0! Please use the card in combination with empty-state instead!

Call to actions should encourage users to enhance and upgrade their setup.

´ Loading interactive demo...
<div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> Start monitoring your Cloud Foundry foundation VMs </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>View release</a> </dt-cta-card-footer-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta">Read more...</a> </dt-cta-card> </div> export class CtaCardDefaultExample {} <div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> Start monitoring your Cloud Foundry foundation VMs </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>View release</a> </dt-cta-card-footer-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta">Read more...</a> </dt-cta-card> </div> export class CtaCardDefaultExample {}

Variants

Removable call to action

´ Loading interactive demo...
<div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> You're missing out on log analytics! </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>Enable log analysis</a> </dt-cta-card-footer-actions> <dt-cta-card-title-actions> <a dt-button variant="secondary" color="cta" style="padding: 0 3px 0 7px;" > <dt-icon name="abort"></dt-icon> </a> </dt-cta-card-title-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> <span i18n> Enable Dynatrace log analytics to automatically correlate host-process log data with problems detected in your environment. Search log files and create pattern-detection rules that trigger custom events. </span> </dt-cta-card> </div> export class CtaCardClosableExample {} <div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> You're missing out on log analytics! </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>Enable log analysis</a> </dt-cta-card-footer-actions> <dt-cta-card-title-actions> <a dt-button variant="secondary" color="cta" style="padding: 0 3px 0 7px;" > <dt-icon name="abort"></dt-icon> </a> </dt-cta-card-title-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> <span i18n> Enable Dynatrace log analytics to automatically correlate host-process log data with problems detected in your environment. Search log files and create pattern-detection rules that trigger custom events. </span> </dt-cta-card> </div> export class CtaCardClosableExample {}

DEPRECATED – will be removed with version 6.0.0 Please use <dt-empty-state> in combination with <dt-card> instead.

Example:

<dt-card>
  <dt-card-title>Some title</dt-card-title>

  <dt-empty-state>
    <dt-empty-state-item>
      <dt-empty-state-item-img>
        <img src="/assets/cta-noagent.svg" alt="No agent" />
      </dt-empty-state-item-img>

      <dt-empty-state-item-title>Some Heading</dt-empty-state-item-title>

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </dt-empty-state-item>
  </dt-empty-state>

  <dt-card-footer-actions>
    <button color="cta">My Action</button>
  </dt-card-footer-actions>
</dt-card>

The <dt-cta-card> is a specific type of card showing a call to action content, defined by a title, an image, a teaser text and an action button. In addition to the custom content, the cta card can hold some special sections:

  • <dt-cta-card-title> - The title of the cta card
  • <dt-cta-card-image> - Image to be shown within the illustration region of the cta card
  • <dt-cta-card-footer-actions> - Action buttons, displayed below the text. For the regular cases there should only be one primary cta styled dt-button.
  • <dt-cta-card-title-actions> - Buttons displayed next to the title. Should be a secondary styled dt-button showing an image.
´ Loading interactive demo...
<div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> Start monitoring your Cloud Foundry foundation VMs </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>View release</a> </dt-cta-card-footer-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta">Read more...</a> </dt-cta-card> </div> export class CtaCardDefaultExample {} <div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> Start monitoring your Cloud Foundry foundation VMs </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>View release</a> </dt-cta-card-footer-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta">Read more...</a> </dt-cta-card> </div> export class CtaCardDefaultExample {}

Imports

You have to import the DtCtaCardModule when you want to use the dt-cta-card:

@NgModule({
  imports: [DtCtaCardModule],
})
class MyModule {}

Please note that you should not use the cta-card's elements like title to hold any arbitrary content just for spacing purposes, make sure to put only the cards title inside the <dt-cta-card-title> element and not controls like buttons.

Examples

Closable

´ Loading interactive demo...
<div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> You're missing out on log analytics! </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>Enable log analysis</a> </dt-cta-card-footer-actions> <dt-cta-card-title-actions> <a dt-button variant="secondary" color="cta" style="padding: 0 3px 0 7px;" > <dt-icon name="abort"></dt-icon> </a> </dt-cta-card-title-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> <span i18n> Enable Dynatrace log analytics to automatically correlate host-process log data with problems detected in your environment. Search log files and create pattern-detection rules that trigger custom events. </span> </dt-cta-card> </div> export class CtaCardClosableExample {} <div class="demo-card"> <dt-cta-card> <dt-cta-card-title i18n> You're missing out on log analytics! </dt-cta-card-title> <dt-cta-card-footer-actions> <a dt-button color="cta" i18n>Enable log analysis</a> </dt-cta-card-footer-actions> <dt-cta-card-title-actions> <a dt-button variant="secondary" color="cta" style="padding: 0 3px 0 7px;" > <dt-icon name="abort"></dt-icon> </a> </dt-cta-card-title-actions> <dt-cta-card-image> <img src="/assets/cta-noagent.svg" /> </dt-cta-card-image> <span i18n> Enable Dynatrace log analytics to automatically correlate host-process log data with problems detected in your environment. Search log files and create pattern-detection rules that trigger custom events. </span> </dt-cta-card> </div> export class CtaCardClosableExample {}