The contact form is designed for collecting user input. This component can be used and customized for other elements as well such as a guestbook.

Best Practices:

• Include clear label that descxribe each input field.
• Ensure there is sufficient contrast so that the contact form doesn't get lost in the background.
• Keep a clearly seen primary action button, like a submit or post button.

                
** CSS **

/* Contact Form */

.contact_form {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 24px;
  color: rgb(0, 0, 0);
  gap: 4px;
  box-shadow: 5px 5px 10px rgb(231, 229, 229);
  border-radius: 12px;
}

** HTML **

<form role="contact form" class="contact_form">
  <label for="fname">First name:</label>
  <input
    type="text"
    id="fname"
    name="fname"
    class="input_short"
    style="width: 50%"
  />
  <br />
  <label for="lname">Last name:</label>
  <input
    type="text"
    id="lname"
    name="lname"
    class="input_short"
    style="width: 50%"
  />
  <br />
  <label for="message">Message:</label>
  <textarea class="input_text" type="text"></textarea>
  <div>
    <button class="button_primary">Submit</button>
  </div>
</form>
                
              

Can be used for showcasing content on the website, like articles or products for sale like bird food and printed pictures.

Best Practices:

• Use a properly cropped image in the card so that the 1:1 aspect ratio display correctly.
• Keep the description short to the text fits on the card

                
** CSS **

/* Card */

.card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  color: rgb(0, 0, 0);
  width: 300px;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgb(231, 229, 229);
  border-radius: 12px;
}

.card_content {
  padding: 12px;
  margin: 12px;
}

.image_placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background-color: rgb(234, 234, 234);
  border: 2px dashed rgb(255, 255, 255);
  border-radius: 6px;
  box-sizing: border-box;
}

** HTML **

<div role="content card" class="card">
  <div class="image_placeholder"></div>
  <div class="card_content">
    <h2>Header</h2>
    <p class="body_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      at vehicula erat. Proin consectetur ante turpis, a egestas
      dolor malesuada sit amet.
    </p>
  </div>
</div>