Card

import { MOButton, MOCard, MORating } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-overview {
    max-width: 300px;
  }

  .card-overview small {
    color: var(--mo-color-neutral-50);
  }

  .card-overview [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .m-0 {
    margin: 0 !important;
  }
`;

const App = () => (
  <>
    <MOCard className="card-overview">
      <img slot="image" src="../assets/images/Metso-HIG.jpg" alt="Metso HIG mills." />
      <h4 class="m-0">HIG Mills</h4>
      <p class="m-0">
        The Metso HIGmill™ is an advanced, energy-efficient fine and ultra-fine grinding solution that utilizes proven
        technology.
      </p>
      <div slot="footer">
        <MOButton variant="primary">More Info</MOButton>
        <MORating></MORating>
      </div>
    </MOCard>

    <style>{css}</style>
  </>
);

import { MOCard } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-basic {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <MOCard className="card-basic">
      This is just a basic card. No image, no header, and no footer. Just your content.
    </MOCard>

    <style>{css}</style>
  </>
);

import { MOCard, MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-header {
    max-width: 300px;
  }

  .card-header [slot="header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-header h3 {
    margin: 0;
  }

  .card-header mo-icon-button {
    font-size: var(--mo-font-size-medium);
  }
`;

const App = () => (
  <>
    <MOCard className="card-header">
      <div slot="header">
        Header Title
        <MOIconButton name="settings"></MOIconButton>
      </div>
      This card has a header. You can put all sorts of things in it!
    </MOCard>

    <style>{css}</style>
  </>
);

import { MOButton, MOCard, MORating } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-footer {
    max-width: 300px;
  }

  .card-footer [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
`;

const App = () => (
  <>
    <MOCard className="card-footer">
      This card has a footer. You can put all sorts of things in it!
      <div slot="footer">
        <MORating></MORating>
        <MOButton slot="footer" variant="primary">
          Preview
        </MOButton>
      </div>
    </MOCard>

    <style>{css}</style>
  </>
);

import { MOCard } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-image {
    max-width: 300px;
  }
  .m-0 {
    margin: 0 !important;
  }
`;

const App = () => (
  <>
    <MOCard className="card-image">
      <img slot="image" src="../assets/images/AGG-Digital.jpg" alt="A kitten walks towards camera on top of pallet." />
      <h4>AGG Digital offering</h4>
      <p>Mobile hero image</p>
    </MOCard>

    <style>{css}</style>
  </>
);

import { MOButton, MOCard, MORating } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-elevated {
    max-width: 300px;
  }

  .card-elevated [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .m-0 {
    margin: 0 !important;
  }
`;

const App = () => (
  <>
    <MOCard className="card-elevated">
      <img slot="image" src="../assets/images/Metso-HIG.jpg" alt="Metso HIG mills." />
      <h4 class="m-0">HIG Mills</h4>
      <p class="m-0">
        The Metso HIGmill™ is an advanced, energy-efficient fine and ultra-fine grinding solution that utilizes proven
        technology.
      </p>
      <div slot="footer">
        <MOButton variant="primary">More Info</MOButton>
        <MORating></MORating>
      </div>
    </MOCard>

    <style>{css}</style>
  </>
);