CODEWITHSUNDEEP
csssemantic-ui
fear_matrix
fear_matrix

Reputation: 4960

How do i make borderless cards without any border in semantic ui

How do I make the below card borderless with no line border?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<div class="ui cards">
  <div class="card">
    <div class="content">
      <div class="header">Elliot Fu</div>
      <div class="meta">Friend</div>
      <div class="description">
        Elliot Fu is a film-maker from New York.
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 3127

Answers (2)

Sumit Patel
Sumit Patel

Reputation: 4638

There is box-shadow which need to remove.

you have to provide box-shadow: none; to this css select body .ui.cards>.card.

body .ui.cards>.card{
  box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<div class="ui cards">
  <div class="card">
    <div class="content">
      <div class="header">Elliot Fu</div>
      <div class="meta">Friend</div>
      <div class="description">
        Elliot Fu is a film-maker from New York.
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Ram Segev
Ram Segev

Reputation: 2573

It is not border but box-shadow add the css in the snippet and it won't display it any more

body .ui.card, body .ui.cards>.card{
  box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<div class="ui cards">
  <div class="card">
    <div class="content">
      <div class="header">Elliot Fu</div>
      <div class="meta">Friend</div>
      <div class="description">
        Elliot Fu is a film-maker from New York.
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions