HTMLPLUS

Card

Cards contain content and actions about a single subject.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusCard

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
elevation
Type
"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24""1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24"
If you want the card to have shadow, use the elevation property,
And select the property value between 1 and 24.
Name
flat
Type
booleanboolean
Use the flat property to neutralize elevation.
Name
outlined
Type
booleanboolean
If you want the card to have border, use the outlined property.
Name
tile
Type
booleanboolean
Use tile property to neutralize border-radius.
Name
default
The default slot.
Name
--plus-card-background-color
Used to adjust the background-color.
Name
--plus-card-border-color
Used to adjust the border-color.
Name
--plus-card-border-radius
Used to adjust the border-radius.
Name
--plus-card-border-width
Used to adjust the border-width.
Name
--plus-card-box-shadow
Used to adjust the box-shodow.

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="container">      
      <Card></Card>      
    </div>    
  </>;
};

export default App;
.container {
  padding: 2rem 0;
  background-color: #EEEEEE;
}
plus-card {
  height: 12rem;
  width: 12rem;
  margin: auto;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React, { useState } from "react";
import { Card } from "@htmlplus/react";

const App = () => {
  const [elevation, setElevation] = useState('12');

  const onChange = event => {
    setElevation(event.target.value);
  };

  return <>    
    <Card elevation={elevation}></Card>    
    <br />    
    <input type="range" value={elevation} min="1" max="24" onChange={event => onChange(event)} />    
  </>;
};

export default App;
plus-card {
  height: 12rem;
  width: 12rem;
  margin: auto;
}
input[type="range"] {
  display: block;
  width: 12rem;
  margin: auto;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Card outlined></Card>    
  </>;
};

export default App;
plus-card {
  height: 12rem;
  width: 12rem;
  margin: auto;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <Card className="pink" outlined></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="yellow" outlined></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="blue" outlined></Card>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-card {
  height: 8rem;
  width: 8rem;
  margin: auto;
}
plus-card.pink {
  --plus-card-border-color: #EF9A9A;
}
plus-card.yellow {
  --plus-card-border-color: #FFF59D;
}
plus-card.blue {
  --plus-card-border-color: #80CBC4;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <Card className="size-1" outlined></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="size-2" outlined></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="size-3" outlined></Card>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-card {
  height: 8rem;
  width: 8rem;
  margin: auto;
}
plus-card.size-1 {
  --plus-card-border-width: 1px;
}
plus-card.size-2 {
  --plus-card-border-width: 2px;
}
plus-card.size-3 {
  --plus-card-border-width: 3px;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="container">      
      <Grid justifyContent="evenly" gutter="md">        
        <Grid.Item xs="12" sm="auto">          
          <Card tile></Card>          
        </Grid.Item>        
        <Grid.Item xs="12" sm="auto">          
          <Card tile outlined></Card>          
        </Grid.Item>        
        <Grid.Item xs="12" sm="auto">          
          <Card tile elevation="5"></Card>          
        </Grid.Item>        
      </Grid>      
    </div>    
  </>;
};

export default App;
.container {
  padding: 2rem 0;
  background-color: #EEEEEE;
}
plus-card {
  height: 8rem;
  width: 8rem;
  margin: auto;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <Card className="pink"></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="yellow"></Card>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Card className="blue"></Card>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-card {
  height: 12rem;
  width: 12rem;
  margin: auto;
}
plus-card.pink {
  --plus-card-background-color: #EF9A9A;
}
plus-card.yellow {
  --plus-card-background-color: #FFF59D;
}
plus-card.blue {
  --plus-card-background-color: #80CBC4;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Card elevation="12" outlined></Card>    
  </>;
};

export default App;
plus-card {
  --plus-card-border-radius: 3rem 0;
  --plus-card-border-width: 2px;
  --plus-card-border-color: #C5C5C5;
  --plus-card-background-color: #DADADA;
  height: 12rem;
  width: 12rem;
  margin: auto;
}
Contributors
Prev
Breadcrumb
Next
Click Outside
SELECT YOUR FRAMEWORK
React logo
React