update class tutorial (#1063)

* update class tutorial

* update

* more

* more

* rename exercise

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry <git@chor.date>

* Update apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

Co-authored-by: Conduitry <git@chor.date>

---------

Co-authored-by: Conduitry <git@chor.date>

Author: Rich-Harris

apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte

@@ -5,8 +5,7 @@
 <div class="container">
 	Flip the card
 	<button
-		class="card"
-		class:flipped={flipped}
+		class={["card", { flipped }]}
 		onclick={() => flipped = !flipped}
 	>
 		<div class="front">

apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md

@@ -1,5 +1,5 @@
 ---
-title: The class directive
+title: The class attribute
 ---
 
 Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a `flipped` class to the card:
@@ -14,15 +14,16 @@ Like any other attribute, you can specify classes with a JavaScript attribute. H
 
 This works as expected — if you click on the card now, it'll flip.
 
-We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte allows you to pass an object or array that is converted to a string by [clsx](https://github.com/lukeed/clsx).
 
 ```svelte
 /// file: App.svelte
 <button
-	class="card"
-	+++class:flipped={flipped}+++
+	+++class={["card", { flipped }]}+++
 	onclick={() => flipped = !flipped}
 >
 ```
 
-This directive means 'add the `flipped` class whenever `flipped` is truthy'.
+This means 'always add the `card` class, and add the `flipped` class whenever `flipped` is truthy'.
+
+For more examples of how to combine conditional classes, [consult the `class` documentation](/docs/svelte/class).