### File

`projects/commons/src/lib/elements/card/components/card.component.ts`

### Metadata

selector | `cmn-card`
styleUrls | `./card.component.scss`
templateUrl | `./card.component.html`

### Index

###### Inputs
hasBorder image text title

### Inputs

hasBorder
Type : `boolean`
Defined in projects/commons/src/lib/elements/card/components/card.component.ts:13

image
Type : `string`
Defined in projects/commons/src/lib/elements/card/components/card.component.ts:12

text
Type : `string`
Defined in projects/commons/src/lib/elements/card/components/card.component.ts:10

title
Type : `string`
Defined in projects/commons/src/lib/elements/card/components/card.component.ts:11

    import { Component, Input } from '@angular/core';

    @Component ({
        selector: 'cmn-card',
        templateUrl: './card.component.html',
        styleUrls: [ './card.component.scss' ],
    })

    export class CardComponent {
        @Input() public readonly text: string;
        @Input() public readonly title: string;
        @Input() public readonly image: string;
        @Input() public readonly hasBorder: boolean;
    }

    <div class="card"
         [class.has-borderless]="!hasBorder">
        <div class="card-image">
            <figure class="image is-2by1">
                <img [src]="image"/>
            </figure>
        </div>
        <div class="card-content">
            <div class="content">
                <span class="title is-4">
                    {{ title }}
                </span>
                <p>
                    {{ text }}
                </p>
            </div>
        </div>
    </div>

`./card.component.scss`

    :host {
        .card {
            &.has-borderless {
                box-shadow: none;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""