CTA card

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

Call to action example

Styleguide

Elements

Elements
max-width: 152px
max-height: 128px

Headline

Fonts/headline

Paragraph

Fonts/paragraph

CTA button

Cta button

Distances

Distances
x: 16px
y: 20px

Call to action variants

Removable call to action

With the "x" button the user has the possibility to remove the call to action tile.

Removable
x: 16px

Icon button

Secondary button

Call to action with headline 2

Optionally you can add a headline 2 to your call to action.

Headline2
x: 20px

Headline 2

Fonts/headline2
´ 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 DefaultCtaCardExampleComponent { } <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 DefaultCtaCardExampleComponent { }

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.

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 ClosableCtaCardExampleComponent { } <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 ClosableCtaCardExampleComponent { }