menu

Cards

Usage

Cards are components that display content and actions on a single topic.

Since cards have a broad definition, Cards were standardized in an effort to increase consistency. As a result, cards will always have at least three things:

  • A Header
  • Some Content
  • A Footer

That's it! Cards can also have images, buttons, tables, etc., as long as they all relate to a single topic.

More documentation about the usage of cards can be found here .

Layout

Cards have some simple layout rules as a part of N2 Styles standardization.

  • The Header is the first element in a card unless an image is present.
  • The Primary Action (if present) should be placed in the right hand corner of the footer.
  • The Secondary Action (if present) should be placed in the left hand corner of the footer.
  • If a Header and/or Footer is not necessary, there should be blank space where they would have been.

API & Demo

Basic Card

Heading

Some subtitle text

more_vert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat suscipit orci, et luctus turpis commodo vel. Pellentesque nec leo molestie, viverra est at, fringilla tellus. Vestibulum sollicitudin egestas dictum. Maecenas sagittis tellus libero, non facilisis felis tincidunt et. 
= card do
  = card_header(title: "Heading", subtitle: "Some subtitle text") do
    %i.material-icons.cursor-pointer more_vert
  = card_content do
    = card_body do
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent consequat suscipit orci, et luctus turpis commodo vel.
      Pellentesque nec leo molestie, viverra est at, fringilla tellus.
      Vestibulum sollicitudin egestas dictum. Maecenas sagittis
      tellus libero, non facilisis felis tincidunt et.
    = card_footer do
      %button.btn.primary.m-0{ type: "button" } Primary Action
      %button.btn-flat.red-text.m-0{ type: "button" } Secondary Action
<Card>
  <CardHeader title="Heading" subtitle="Some subtitle text">
    <i className="material-icons">more_vert</i>
  </CardHeader>
  <CardContent>
    <CardBody>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      consequat suscipit orci, et luctus turpis commodo vel. Pellentesque
      nec leo molestie, viverra est at, fringilla tellus. Vestibulum
      sollicitudin egestas dictum. Maecenas sagittis tellus libero, non
      facilisis felis tincidunt et.
    </CardBody>
    <CardFooter>
      <button className="btn primary m-0">Primary Action</button>
      <button className="btn-flat red-text m-0">Secondary Action</button>
    </CardFooter>
  </CardContent>
</Card>
Card With An Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat suscipit orci, et luctus turpis commodo vel. Pellentesque nec leo molestie, viverra est at, fringilla tellus. Vestibulum sollicitudin egestas dictum. Maecenas sagittis tellus libero, non facilisis felis tincidunt et. 
# You can pass an id to the card
= card 'Koala' do
  = card_image "https://bit.ly/2BqYXU3"
  = card_header(title: "Heading") do
    %i.material-icons.cursor-pointer more_vert
  = card_content do
    = card_body do
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent consequat suscipit orci, et luctus turpis commodo vel.
      Pellentesque nec leo molestie, viverra est at, fringilla tellus.
      Vestibulum sollicitudin egestas dictum. Maecenas sagittis
      tellus libero, non facilisis felis tincidunt et.
    = card_footer do
      %button.btn.primary.m-0{ type: "button" } Primary Action
      %button.btn-flat.red-text.m-0{ type: "button" } Secondary Action
// You can pass an id to the card
<Card id="Koala">
  <CardImage image="https://bit.ly/2BqYXU3" />
  <CardHeader title="Heading">
    <button className="btn-flat m-0">Button</button>
  </CardHeader>
  <CardContent>
    <CardBody>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      consequat suscipit orci, et luctus turpis commodo vel. Pellentesque
      nec leo molestie, viverra est at, fringilla tellus. Vestibulum
      sollicitudin egestas dictum. Maecenas sagittis tellus libero, non
      facilisis felis tincidunt et.
    </CardBody>
    <CardFooter>
      <button className="btn primary m-0">Primary Action</button>
    </CardFooter>
  </CardContent>
</Card>
Card With An Image and List Items

No Footer Content

  • Name
    Darth Vader
    chevron_right
  • Phone
    919-218-0819
    chevron_right
  • Email
    darth@n2pub.com
    chevron_right
  • Password
    Click to change your password
    chevron_right 
# Using inline styles on elements will allow you to override the default padding.
# Inline styles take precendence over css classes.
= card do
  = card_image "https://bit.ly/2N8Qqf2"
  = card_header(title: "No Footer Content") do
    %button.btn-flat.primary{ type: "button" } Button
  = card_content do
    = card_body do
      %ul.list-group.separator{:style => "margin: -24px"}
        %li.list-group-item.waves-effect.ripple
          .d-flex.flex-column.col-5
            Name
          .d-flex.flex-column.col-6
            Darth Vader
          .d-flex.flex-column.col-1
            %i.material-icons chevron_right
        %li.list-group-item.waves-effect.ripple
          .d-flex.flex-column.col-5
            Phone
          .d-flex.flex-column.col-6
            919-218-0819
          .d-flex.flex-column.col-1
            %i.material-icons chevron_right
        %li.list-group-item.waves-effect.ripple
          .d-flex.flex-column.col-5
            Email
          .d-flex.flex-column.col-6
            darth@n2pub.com
          .d-flex.flex-column.col-1
            %i.material-icons chevron_right
        %li.list-group-item.waves-effect.ripple
          .d-flex.flex-column.col-5
            Password
          .d-flex.flex-column.col-6
            Click to change your password
          .d-flex.flex-column.col-1
            %i.material-icons chevron_right
    = card_footer
// Using inline styles on elements will allow you to override the default padding.
// Inline styles take precendence over css classes.
<Card>
  <CardImage image="https://bit.ly/2N8Qqf2" />
  <CardHeader title="No Footer Content">
    <button className="btn-flat m-0">Button</button>
  </CardHeader>
  <CardContent>
    <CardBody>
      <ul style={{ margin: "-24px" }} className="list-group separator">
        <li className="list-group-item waves-effect ripple">
          <div className="d-flex flex-column col-5">Name</div>
          <div className="d-flex flex-column col-6">Darth Vader</div>
          <div className="d-flex flex-column col-1">
            <i className="material-icons">chevron_right</i>
          </div>
        </li>
        <li className="list-group-item waves-effect ripple">
          <div className="d-flex flex-column col-5">Phone</div>
          <div className="d-flex flex-column col-6">919-218-0819</div>
          <div className="d-flex flex-column col-1">
            <i className="material-icons">chevron_right</i>
          </div>
        </li>
        <li className="list-group-item waves-effect ripple">
          <div className="d-flex flex-column col-5">Email</div>
          <div className="d-flex flex-column col-6">darth@n2pub.com</div>
          <div className="d-flex flex-column col-1">
            <i className="material-icons">chevron_right</i>
          </div>
        </li>
        <li className="list-group-item waves-effect ripple">
          <div className="d-flex flex-column col-5">Password</div>
          <div className="d-flex flex-column col-6">
            Click to change your password
          </div>
          <div className="d-flex flex-column col-1">
            <i className="material-icons">chevron_right</i>
          </div>
        </li>
      </ul>
    </CardBody>
    <CardFooter>
      <button className="btn primary m-0">Primary Action</button>
    </CardFooter>
  </CardContent>
</Card>
Collapsible Card
# You can pass an option of 'opened' to open the drawer by default
# Note that you must pass collapsible, opened, and target to both the
# card_header the card_content
= card do
  = card_header(title: "Heading", collapsible: true, target: "contentId")
  = card_content(target: "contentId", collapsible: true) do
    = card_body do
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent consequat suscipit orci, et luctus turpis commodo vel.
      Pellentesque nec leo molestie, viverra est at, fringilla tellus.
      Vestibulum sollicitudin egestas dictum. Maecenas sagittis
      tellus libero, non facilisis felis tincidunt et.
    = card_footer do
      %button.btn.primary{ type: "button" } Primary Action
      %button.btn-flat.red-text{ type: "button" } Secondary Action
// You can pass an 'opened' prop to open the drawer by default
// Note that you must pass collapsible, opened, and target to both the
// <CardHeader> and the <CardContent>
<Card>
  <CardHeader title="Heading" collapsible target="contentId" />
  <CardContent collapsible target="contentId">
    <CardBody>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      consequat suscipit orci, et luctus turpis commodo vel. Pellentesque
      nec leo molestie, viverra est at, fringilla tellus. Vestibulum
      sollicitudin egestas dictum. Maecenas sagittis tellus libero, non
      facilisis felis tincidunt et.
    </CardBody>
    <CardFooter>
      <button className="btn primary m-0">Primary Action</button>
      <button className="btn-flat red-text m-0">Secondary Action</button>
    </CardFooter>
  </CardContent>
</Card>