This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pixelperfectionist/admin/bando/demos/Cards.svelte

47 lines
1.3 KiB

<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>