Cards #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

@Component({
  selector: 'your-component',
  template: `<section>
    <h2>Cards</h2>
    <ag-card [isBorder]="true">
      <div class="p16">Border Card</div>
      <div class="p16 flex-grow-1 flex-shrink-1"
           style="flex-basis: 50ch;">
        The card comes with minimal
        <span class="quoted">skinning css</span>
        and no padding (the padding you see here is from the demo styles).
        By default Cards have a flex direction of <i>row</i>, so each child
        with a <i>flex</i> rule will get placed as a sort of column
        in the row (until the viewport is shrunk below a size that can support
        the content's flex-basis; under that it will wrap and thus stack).
      </div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card [isBorder]="true"
             [isRounded]="true">
      <div class="p16">
        Border & Rounded
      </div>
      <div class="p16 flex-grow-1 flex-shrink-1"
           style="flex-basis: 50ch;">
        The card comes with minimal
        <span class="quoted">skinning css</span>
        and no padding (the padding you see here is from the demo styles).
        By default Cards have a flex direction of <i>row</i>, so each child
        with a <i>flex</i> rule will get placed as a sort of column
        in the row (until the viewport is shrunk below a size that can support
        the content's flex-basis; under that it will wrap and thus stack).
      </div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card [isStacked]="true"
             [isBorder]="true">
      <div class="p16">
        Stacked & Border
      </div>
      <div class="p16">
        Stacked cards start their lives with flex direction <i>column</i>, so each child
        be stacked one on top of the other and continue to grow downward.
      </div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card [isStacked]="true"
             [isShadow]="true">
      <div class="p16">Stacked and shadow</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card [isStacked]="true"
             [isShadow]="true"
             [isAnimated]="true">
      <div class="p16">Stacked, shadown, and animated</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card type="success"
             [isStacked]="true">
      <div class="p16">Success stacked</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card type="success"
             [isStacked]="true"
             [isRounded]="true">
      <div class="p16">Success, stacked, and rounded</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card type="info"
             [isStacked]="true">
      <div class="p16">Info and stacked</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card type="warning"
             [isStacked]="true">
      <div class="p16">Warning and stacked</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card type="error"
             [isStacked]="true">
      <div class="p16">Error and stacked</div>
      <div class="p16">Card</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card [isSkinned]="false">
      <div class="p16">Base Card</div>
      <div class="p16">No Skin</div>
    </ag-card>
    <div class="mbe24"></div>
    <ag-card css="addition-classes">
      <div class="p16">Custom CSS Class Overrides</div>
      <div class="p16">Inspect to see additional-classes</div>
    </ag-card>
  </section>`
})
export class YourComponent { //... }