bandolier-website/admin/bando/demos/Cards.svelte

<script>
  import Icon from '$/client/components/Icon.svelte';
  import PlaceHolder from "$/client/components/PlaceHolder.svelte";
</script>
<style>
  content {
    display: flex;
    flex-direction: column;
    flex: flex-shrink;
    flex-grow: 1;
    justify-content: center;
  }

  button#ok {
    background-color: var(--color-bg-secondary);
  }

  card {
    width: 600px;
  }
</style>

<content>
  <card>
    <top>
      <PlaceHolder width={ 16 * 60 } height={ 9 * 60 } />
    </top>

    <middle>
      <h4>
        Card Example
      </h4>
      <p>Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </middle>

    <bottom>
      <button-group>
        <button id="ok"><Icon name="check-circle" color="var(--color-accent)" size="48" /></button>
        <button><Icon name="x-circle" color="var(--color-bg)"  size="48"/></button>
      </button-group>
    </bottom>
  </card>

  <p>This is another example of simply using CSS to implement basic components.  Rather than implement Svelte compoentns with slots it is sometimes <b>much</b> easier to CSS and plain HTML.  To see how to use cards look at <b>admin/bando/demos/Cards.svelte</b>.  I also show you how to restyle the buttons if you want them to be larger and square like you find in many panel examples.</p>
</content>