Swanky Docs - Patterns Demo

01 Cards

Lorem ipsums dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.

ANGULAR v1.6

1.1 Card Component

name: `swanky.components.card:cardComponent`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.

Example

Travel / Adventure

Living Helsinki

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

6

81

Travel / Adventure

Hipster Bearding

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

6

81

Travel / Adventure

A Walk in the Woods

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

6

81

Live Edit

<card-content>
      <h5>Travel / Adventure</h5>
      <h2>Living Helsinki</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="btn-default">View</button>
    </card-content>

<card-footer>
      <card-action type="comment">6</card-action>
      <card-action type="like">81</card-action>
    </card-footer>
  </card>

<card-content>
      <h5>Travel / Adventure</h5>
      <h2>Hipster Bearding</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="btn-default">View</button>
    </card-content>

<card-footer>
      <card-action type="comment">6</card-action>
      <card-action type="like">81</card-action>
    </card-footer>
  </card>

<card-content>
      <h5>Travel / Adventure</h5>
      <h2>A Walk in the Woods</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="btn-default">View</button>
    </card-content>

<card-footer>
      <card-action type="comment">6</card-action>
      <card-action type="like">81</card-action>
    </card-footer>
  </card>
</div>

1.3 Card Accessibility

Hover State

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.

Pro Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula.

Angular

01 Cards

1.1 Card Component

Example

Travel / Adventure

Living Helsinki

Travel / Adventure

Hipster Bearding

Travel / Adventure

A Walk in the Woods

Live Edit

1.3 Card Accessibility