Components

CauseCard

The CauseCard is the basic component to create a card. It serves as a parent component for 1 or more child components.

Selector

<cause-card>

Inputs

No inputs

Example

app.component.html

<cause-card>
    ...
</cause-card>

app.module.ts

@Module({
    ...,
    imports [
        ...,
        CauseCardModule,
        ...,
    ],
    ...
})
export class AppModule {}

CauseCardTitle

The CauseCardTitle adds a title to the CauseCard .

Selectors

<h1|h2|h3|h4|h5|h6 [cause-card-title]>

Inputs

No inputs

Example

app.component.html

<cause-card>
    ...
    <h2 cause-card-title>Together for a safer world.</h2>
    ...
</cause-card>

app.module.ts

@Module({
    ...,
    imports [
        ...,
        CauseCardModule,
        ...,
    ],
    ...
})
export class AppModule {}

CauseCardImage

The CauseCardImage adds a image to the CauseCard .

Selectors

<img [cause-card-image]>

Inputs

No inputs

Example

app.component.html

<cause-card>
    <img cause-card-image src="...">
    ...
</cause-card>

app.module.ts

@Module({
    ...,
    imports [
        ...,
        CauseCardModule,
        ...,
    ],
    ...
})
export class AppModule {}

CauseCardText

The CauseCardText adds a text to the CauseCard .

Selectors

<p [cause-card-text]>

Inputs

No inputs

Example

app.component.html

<cause-card>
    ...
    <p cause-card-text>
        We’re on a mission to democratize security
        by connecting technology with people to better
        protect lives and valuables. 
    </p>
    ...
</cause-card>

app.module.ts

@Module({
    ...,
    imports [
        ...,
        CauseCardModule,
        ...,
    ],
    ...
})
export class AppModule {}